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

Question

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.

Highlighted option

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.

Note that you do not need `javascript:` in the `onchange` event handler. — Heretic Monkey, Oct 20 '20 at 20:15
Does this answer your question? [Can I colour backgrounds of selected items in HTML select options with CSS only?](https://stackoverflow.com/questions/9309844/can-i-colour-backgrounds-of-selected-items-in-html-select-options-with-css-only) — Heretic Monkey, Oct 20 '20 at 20:20
@HereticMonkey Partly... I just cant find a way to disable it completely like making it transparent. — Weiß Brot, Oct 22 '20 at 19:29

Ryan Wilson · Answer 1 · 2020-10-20T20:57:54.400

0

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/)

edited Oct 20 '20 at 20:57

answered Oct 20 '20 at 20:37

Ryan Wilson

10,223
2
21
40

Okay this is working, but there seems to be a problem with the hover effect. option:checked is now coloring the option correctly. But as soon as I add a option:hover, the click will be blue again. Also the gradient does not take effect. It just filled the color without the gradient effect. And I am not able to make it transparent like rgb(255,255,255,.5), because background-color just doesnt seem to override the blue click. – Weiß Brot Oct 21 '20 at 17:46
@WeißBrot Did you add to the `fiddle` I gave you? Perhaps if I see what you are doing in your `css` I can help more. – Ryan Wilson Oct 21 '20 at 18:05
Yes, I added the fiddle. I removed all my extra css to exclude an mistake there. Maybe you can just create a background with an opacity like rgba(255,255,255,0.2); That would help me a lot :) Why may be interesting is this example: `background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));` This should make a gradient background from transparent to red. Instead it is this blue to red. Like the blue is always there... – Weiß Brot Oct 21 '20 at 18:19
@WeißBrot I don't have a link to your `fiddle`. – Ryan Wilson Oct 21 '20 at 21:23
Oh ... just replace your background property with this `background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));` You will see a gradient from blue to red. But it should be transparent to red. Maybe you are able to make the background transparent like `rgba(255,255,255,0.2);` – Weiß Brot Oct 21 '20 at 21:49

score 0 · Accepted Answer · answered Oct 23 '20 at 09:01

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;
}

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

2 Answers2