多樣式選項元素

可能重複：
Styling select options 多樣式選項元素

我想知道是否有可能一個option元素中應用兩種風格？例如，在下面的代碼中，我希望我的產品名稱的樣式爲color:black;，而價格是另一種樣式color:red; font-weight:bold;。我曾嘗試在span.price附近包裝我的價格，但沒有奏效。

<select> 
    <option>Apple <span class="price">$1.00</span></option> 
    <option>Banana <span class="price">$2.50</span></option> 
    <option>Cherry <span class="price">$1.50</span></option> 
</select>

來源

2012-12-04 Jon

@Diodeus對不起，我錯過了那個線程:( – Jon

option樣式以本地平臺的方式進行樣式設計。你不能做任何你想要的，而不改變標記（和/或使用JavaScript）

來源

2012-12-04 18:36:35 wanovak

這就是我想的:(謝謝你驗證我的預感。 – Jon

試試這個CSS在HTML文檔，或在外部樣式表（剝離出<style>標籤，如果你把它放在一個外部的樣式表）：

<style type="text/css"> 
select option { color: black; } 
select option span.price { color: red; font-weight:bold; } 
</style>

通過這樣做，你基本上是說「我選擇的所有選項都應該有黑色的文字顏色」。然後，通過說「在我的選擇內部的選項內的任何具有」價格「類的跨度應該具有紅色文本顏色。」

來源

2012-12-04 18:35:44 Sean

多樣式選項元素

回答

相關問題