單擊選擇中的選項時如何刪除藍色突出顯示

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