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

Question

我创建了一个带有一些选项的 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;

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

Answer 1

这似乎适用于您要执行的操作，您必须修改配色方案以适合您的默认选择颜色，但我认为代码片段应该让您有机会根据自己的喜好对其进行自定义，您可以随时更改如果您想将其应用于不同选择的不同配色方案，请将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/ )

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