如何設計選擇標籤的選項元素？

我試圖在Google Chrome的select下拉菜單中設置option的樣式。它適用於除IE9和Chrome之外的所有瀏覽器。如何設計選擇標籤的選項元素？

option.red { 
 
    background-color: #cc0000; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    color: white; 
 
}

<select name="color"> 
 
    <option class="red" value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="green">Green</option> 
 
</select>

不使用JavaScript的，是有沒有辦法設置樣式在谷歌瀏覽器的選項？一旦選定，背景顏色不會顯示。

來源

2011-05-04 Mike

Safari，IE 6-8，FF等 – Mike 2011-05-04 17:07:44

我只是希望選項代碼在Chrome中工作。 – Mike 2011-05-04 17:08:27

適用於我的鉻合金，只是在選擇時丟失紅色背景。 – Andrea 2011-05-04 17:08:37

不幸的是，WebKit瀏覽器不支持<option>標籤的樣式，但color和background-color除外。

使用最廣泛的跨瀏覽器解決方案是使用<ul>/<li>並使用CSS對它們進行樣式設置。像Bootstrap這樣的框架做得很好。

來源

2013-06-20 00:25:37

+12

這不完全正確。它實際上是取決於操作系統的下拉式支持的一組樣式。有趣的是，樣式選擇似乎在Windows 7/8中可用，我可以肯定地說它不適用於OS X（10.8）。 – vpiTriumph 2013-12-18 21:32:12

它也不適用於Linux的風格。 =/ – 2014-01-02 14:05:24

現代瀏覽器DO支持樣式化「OPTION」標籤 - 爲樣式添加樣式屬性 – Jimmery 2017-01-24 14:13:34

這是一個選擇（從瀏覽器開發人員或W3C，我找不到任何有關樣式選擇選項的W3C規範），不允許樣式選擇選項。

我懷疑這是爲了保持與本地選擇列表的一致性。
（想想移動設備）。

3解決方案來我的腦海：

使用Select2實際上你選擇轉換成ul秒（這讓很多的東西）
分裂您select s轉換多以組值
斯普利特into optgroup

來源

2013-09-23 09:23:37

您是對的。明確的選擇是在CSS2時代做出的，因爲在那個時候，瀏覽器使用平臺UI小部件來呈現瀏覽器UI小部件，平臺UI小部件通常支持比CSS想要的更受限制的樣式。今天，FF和IE已經開始自我渲染所有的控制;手機瀏覽器除了手機FF都有這個問題; Chrome正在到達那裏;桌面Safari和Opera正在落後。 – 2015-01-10 16:00:19

我同意Pierre和@John。由於JQUI已經可用，我用jQuery UI的selectMenu替換了大型客戶站點上的所有選擇框。 – BenRacicot 2015-01-14 20:50:20

我真的發現了一些最近似乎適用於stylin的東西g使用純CSS的Chrome，Firefox和IE中的個人3210元素。

也許，請嘗試以下操作：

HTML：

<select> 
    <option value="blank">Blank</option> 
    <option class="white" value="white">White</option> 
    <option class="red" value="red">Red</option> 
    <option class="blue" value="blue">Blue</option> 
</select>

CSS：

select { 
    background-color:#000; 
    color: #FFF; 
} 

select * { 
    background-color:#000; 
    color:#FFF; 
} 

select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */ 
    background-color:#F00; 
    color:#FFF; 
} 

select *.white { 
    background-color:#FFF; 
    color:#000; 
} 

select *.blue { 
    background-color:#06F; 
    color:#FFF; 
}

奇怪做什麼投擲謹慎的風。但它似乎並不支持:active :hover :focus :link :visited :after :before。

實施例上的jsfiddle：http://jsfiddle.net/Xd7TJ/2/

來源

2014-03-25 23:25:32 LeoV117

+16

這在使用Chrome的Mac中不起作用。在Mac OSX 10.9.2版本上測試。 – 2014-04-13 07:54:42

我正在運行Windows 7，這似乎工作正常。我實際上並不喜歡這種方法，因爲它似乎只支持'background-color'和'color' CSS屬性。 – LeoV117 2014-04-13 15:28:16

對於windows 7中的chrome，它不會爲選擇框着色，只有下拉框中的選項。所以如果你選擇了彩色選項，一旦選擇了顏色，它就會有不同的顏色。 – Myforwik 2014-08-27 06:27:54

鉻的未來版本（49+）現在將支持造型<option>元件與font-weight。來源：https://code.google.com/p/chromium/issues/detail?id=44917#c22

新建選擇彈出式菜單：應該應用字體重量樣式。

此CL刪除themeChromiumSkia.css。其中|!important|阻止到申請font-weight。現在html.css有|font-weight:normal|，並且 |!important|應該是不必要的。

有一個Chrome樣式表themeChromiumSkia.css，它一直使用font-weight: normal !important;。它應該在穩定的Chrome版本49.0版本中。

來源

2015-11-29 23:39:13 TylerH

這就是爲什麼我每隔幾天就要爲grep我的代碼庫中的字符像'！important'這樣的一個要點。 – BoltClock 2015-11-30 03:29:10

我使用jQuery ......雖然我們不能風格特別的選擇，我們可以風格的選擇本身就是一種解決辦法 - 和使用JavaScript來更改類根據所選內容選擇的。它適用於簡單的情況。

$('select.potentially_red').on('change', function() { 
 
if ($(this).val()=='red') { 
 
    $(this).addClass('option_red'); 
 
} else { 
 
    $(this).removeClass('option_red'); 
 
} 
 
}); 
 
$('select.potentially_red').each(function() { 
 
if ($(this).val()=='red') { 
 
    $(this).addClass('option_red'); 
 
} else { 
 
    $(this).removeClass('option_red'); 
 
} 
 
});

.option_red { 
 
    background-color: #cc0000; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    color: white; 
 
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<!-- The js will affect all selects which have the class 'potentially_red' --> 
 
<select name="color" class="potentially_red"> 
 
    <option value="red">Red</option> 
 
    <option value="white">White</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="green">Green</option> 
 
</select>

注意，JS分爲兩個部分，在頁面上爲應對改變正確初始化應有盡有，.on('change', ...部分each部分。我無法將js轉換成乾燥的功能，它因爲某種原因而中斷它

來源

2017-01-10 18:49:58 xxjjnn

如何設計選擇標籤的選項元素？

回答

相關問題