How to remove blue highlighting on clicking an option in a select

I have created an asp:listbox with some options in it.

    <select size="4" name="ItemContainerBox" onchange="javascript:setTimeout('__doPostBack('ItemContainerBox','')', 0)" id="ItemContainerBox" class="FTP_Content">      
       <option value="test1" class="FTP_Item noSelect">test1</option>
       <option value="test2" class="FTP_Item noSelect">test2</option>
       <option value="test3" class="FTP_Item noSelect">test3</option>
       <option value="test4" class="FTP_Item noSelect">test4</option>
    </select>

If I now click any option, it will be highlighted in blue and even stays blue, after releasing the mouse button.

What I have tried so far:

    -webkit-touch-callout: none;
    -webkit-user-select: none;    
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

With all this code above, the text inside the option does not get highlighted or marked. But the background of the option is still getting blue.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This appears to work for what you are trying to do, you’ll have to modify the color scheme to fit your default select color, but I think the code snippet should give you a chance to customize it to your liking, you can always change the css selector to a more granular class in case you want to apply this to different color schemes for different selects. You could also apply this to hover or any other type of action taken on your select. I also included a jsfiddle link at the end of the answer for you to use as a sandbox.

select option:checked {
        /*I used an off white color of #F8F8FF as an example,change to your default color*/ 
        /*The next two are for changing the background for selected option*/
        background: linear-gradient(#F8F8FF, #F8F8FF);
        /*This one is for IE*/
        background-color: #F8F8FF !important;
        /*Keep the text color the same on select*/
        /*I used black as I don't have a styled select like your picture*/
        /*You can change this part to fit your use case of text color*/     
        color: black;
        -webkit-text-fill-color: black;
    }

<select size="4" name="ItemContainerBox" id="ItemContainerBox" class="FTP_Content">      
   <option value="test1" class="FTP_Item noSelect">test1</option>
   <option value="test2" class="FTP_Item noSelect">test2</option>
   <option value="test3" class="FTP_Item noSelect">test3</option>
   <option value="test4" class="FTP_Item noSelect">test4</option>
</select>

JsFiddle:

(https://jsfiddle.net/t0kp3xv6/)

Method 2

I found the solution. Since it does not seem to be possible, to remove the blue highlighting, I will make it transparent by setting the image of the background which is in the body, also inside the option.

select option:checked {
     background-image: url("ImageOfTheBody.jpg");
     background-attachment: fixed; /*This will give the illusion of being transparent*/
     background-repeat: no-repeat;
     background-size: cover;
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0