如何在单击选择中的选项时删除蓝色突出显示

Posted 2023-04-01

【中文标题】如何在单击选择中的选项时删除蓝色突出显示

【英文标题】：How to remove blue highlighting on clicking an option in a select

【发布时间】：2021-02-03 17:14:14

【问题描述】：

我创建了一个带有一些选项的 asp:listbox。

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

如果我现在单击任何选项，在松开鼠标按钮后，它将以蓝色突出显示，甚至保持蓝色。

到目前为止我所尝试的：

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

使用上面的所有代码，选项内的文本不会被突出显示或标记。但是选项的背景还是变蓝了。

【问题讨论】：

请注意，onchange 事件处理程序中不需要 javascript:。

这能回答你的问题吗？ Can I colour backgrounds of selected items in HTML select options with CSS only?

@HereticMonkey 部分...我只是找不到完全禁用它的方法，就像让它透明一样。

【参考方案1】：

这似乎适用于您正在尝试做的事情，您必须修改配色方案以适合您的默认选择颜色，但我认为代码 sn-p 应该让您有机会根据自己的喜好自定义它，您可以随时将css 选择器更改为更精细的类，以防您想将其应用于不同选择的不同配色方案。您还可以将其应用于悬停或对您的选择采取的任何其他类型的操作。我还在答案末尾添加了一个jsfiddle 链接供您用作沙箱。

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

【讨论】：

好的，这是可行的，但悬停效果似乎有问题。 option:checked 现在正确地为选项着色。但是只要我添加一个选项：悬停，点击就会再次变成蓝色。渐变也不会生效。它只是填充了没有渐变效果的颜色。而且我无法让它像 rgb(255,255,255,.5) 一样透明，因为背景颜色似乎并没有覆盖蓝色点击。

@WeißBrot 你添加到我给你的fiddle 了吗？也许如果我在css 中看到你在做什么，我可以提供更多帮助。

是的，我添加了小提琴。我删除了所有额外的 CSS 以排除那里的错误。也许你可以创建一个不透明的背景，比如 rgba(255,255,255,0.2);这对我有很大帮助:) 这个例子可能很有趣：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 这应该使渐变背景从透明变为红色。相反，它是蓝色到红色。就像蓝色一直都在……

@WeißBrot 我没有指向您的fiddle 的链接。

哦...只需将您的背景属性替换为background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 您将看到从蓝色到红色的渐变。但它应该对红色透明。也许您可以像rgba(255,255,255,0.2);

一样使背景透明

【参考方案2】：

我找到了解决方案。由于似乎不可能，要删除蓝色突出显示，我将通过设置正文中的背景图像使其透明，也在选项内部。

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;