的HTML <select>選定的選項背景色CSS樣式
[英]HTML <select> selected option background-color CSS style
問題描述
選擇選項的“選定”顏色有樣式嗎？ 例如：
<HTML>
<BODY>
<FORM NAME="form1">
<SELECT NAME="mySelect" SIZE="7" style="background-color:red;">
<OPTION>Test 1
<OPTION>Test 2
<OPTION>Test 3
<OPTION>Test 4
<OPTION>Test 5
<OPTION>Test 6
<OPTION>Test 7
</SELECT>
</FORM>
</BODY>
</HTML>
當我選擇一個選項時，它變成藍色，我想覆蓋它並使它成為不同的顏色。 在這種樣式中，我期望的是“選定顏色”之類的東西，但它不存在。
10 個解決方案
解決方案1
16 已采納 2010-03-08 15:13:58
您可能無法使用純CSS做到這一點。
但是，一些JavaScript可以很好地做到這一點。
一種簡單的方法-
var sel = document.getElementById('select_id'); sel.addEventListener('click', function(el){ var options = this.children; for(var i=0; i < this.childElementCount; i++){ options[i].style.color = 'white'; } var selected = this.children[this.selectedIndex]; selected.style.color = 'red'; }, false);
解決方案2
14 2011-04-10 16:30:04
<select name=protect_email size=1 style="background: #009966; color: #FFF;" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
<option value=0 style="background: #009966; color: #FFF;" selected>Protect my email</option>;
<option value=1 style="background: #FF0000; color: #FFF;">Show email on advert</option>;
</select>;
http://pro.org.uk/classified/Directory?act=book&category=120
在FF，Opera，Konqueror上進行了測試，效果很好...
解決方案3
5 2010-03-08 15:44:06
您不能依賴CSS作為表單元素。 結果在所有瀏覽器中差異很大。 我認為Safari根本無法讓您自定義任何表單元素。
最好的選擇是使用jqTransform之類的插件（使用jQuery）。
編輯：該頁面目前似乎無法正常工作。 還有自定義表單元素 ，它支持MooTools，將來可能會支持jQuery。
解決方案4
2 2012-09-26 12:46:27
此語法將在XHTML中工作，而在IE6中不工作，但這是非JavaScript方式：
option[selected] { background: #f00; }
如果您想即時執行此操作，則必須使用javascript，其他人建議的方式。
解決方案5
2 2010-03-08 14:55:35
當前CSS不支持此功能。
您可以構建自己的插件，也可以使用可通過DIV / CSS模仿此行為的插件。
解決方案6
2 2017-02-06 13:24:50
我認為您可能正在尋找的解決方案是：
option:checked {
box-shadow: 0 0 10px 100px #FFFF00 inset; }
解決方案7
0 2016-08-15 11:32:16
我意識到這是一篇過時的文章，但是如果有幫助，您可以應用此CSS讓IE11為<select>元素的焦點指示畫出虛線輪廓，使其類似於Firefox的焦點指示： select:focus::-ms-value { background: transparent; color: inherit; outline-style: dotted; outline-width: thin; } select:focus::-ms-value { background: transparent; color: inherit; outline-style: dotted; outline-width: thin; }
解決方案8
0 2011-02-19 07:52:49
原則上，您可以使用option [selected]作為選擇器來設置樣式，但這在許多瀏覽器中不起作用。 另外，這僅允許您設置所選選項的樣式，而不能為具有懸停焦點的選項設置樣式。
經測試可在Chrome 9和Firefox 3.6中運行，但在Internet Explorer 8中無法運行。
解決方案9
-2 2015-02-23 11:21:45
在CSS中：
選擇選項：選中{背景色：紅色； }
解決方案10
-4 2015-11-25 06:40:13
我們可以將藍色替換為我們的自定義顏色。它適用於Internet Explorer，Firefox和Chrome：
通過以下CSS使用以下代碼：
option: checked, option: hover {
Color: #ffffff;
background: #614767 repeat url("data:image/gif;base64,R0lGODlh8ACgAPAAAGFGZQAAACH5BAAAAAAALAAAAADwAKAAAAL+hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIhRVgEAOw");
}
更改html select的背景顏色時，第一個選項隨之更改
[英]When changing background-color of html select, first option changes with it
Chrome無法處理.style =“ background-color：＃333223;”
[英]Chrome not handling .style = “background-color:#333223;”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.