更改<select>取決於它的價值的顏色 - CSS只

我有一些選項內的HTML選擇元素（？）：更改<select>取決於它的價值的顏色 - CSS只

<select class = "myRed" id="mySelect" onchange="onSelectChange()"> 
    <option selected value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select>

我想選擇對象的文本顏色爲紅色當其值爲0時，否則爲黑色。我可能能夠通過JavaScript來做到這一點：

function onSelectChange(){ 
    if (document.getElementById('mySelect').value == 0){ 
     document.getElementById('mySelect').className = 'myRed'; 
    } else { 
     document.getElementById('mySelect').className = 'myBlack' 
    } 
}

其中

.myRed{color:red;}

和

.myBlack{color:black;}

然而，有人告訴我，這是隻通過CSS莫名其妙地訪問，而無需使用JavaScript的。我想不出使用JS的其他方式。任何人都可以請指教？

來源

2015-02-07 Matteo NNZ

造型選擇真的是不一致的，從瀏覽器到瀏覽器 - 我通常使用類似customselect（http://adam.co/lab/jquery/ customselect /），但不同於你的問題狀態，這*會使用javascript來創建元素，然後是一層CSS來設計它們。 – Djave 2015-02-07 22:14:22

@Oriol感謝您的評論，我在沒有測試的情況下編寫它，因爲這次JS應該是「避免」的解決方案。謝謝，我修好了。 – 2015-02-07 22:14:50

@Djave，確切地說，我個人無法弄清楚如何讓它沒有JavaScript。但告訴我這個人知道他的東西，所以這是值得一試，看看這裏是否有人知道:) – 2015-02-07 22:17:10

你可以使用required並將空值分配給第一個選項：

<select class="mySelect" required> 
    <option value="">0</option> 
    <option value="1">1</option> 
</select>

CSS：

.mySelect { font-size: 2em; } 
.mySelect option { color: green; } 
.mySelect option[value=""] { color: red; } 
.mySelect:invalid { color: red; }

檢查fiddle

來源

2015-02-07 22:32:52 msfoster

非常感謝，這正是我正在尋找！ – 2015-02-07 22:38:58

很高興我能幫上忙。 – msfoster 2015-02-07 22:39:27

如果你正在尋找簡單的東西，你總是可以這樣來做：

的.css

.myRed{color:red;} 
.myBlack{color:black;}

的.html

<select class = "myRed" id="mySelect"> 
    <option selected value="0" class="myRed">0</option> 
    <option value="1" class="myBlack">1</option> 
    <option value="2" class="myBlack">2</option> 
</select>

http://codepen.io/anon/pen/yyPKoM

來源

2015-02-07 22:21:08 user3781632

謝謝，這是我已經嘗試的，但沒有達到我的目的。這是因爲分配給select的類總是「myRed」，所以在這種情況下，樣式是元素_inside_列表，但select對象中的選定元素將始終爲紅色（至少沒有js）:( – 2015-02-07 22:22:44

是的，我意識到你的意思後張貼。對不起！ – user3781632 2015-02-07 22:23:24

沒有概率，感謝您的時間！ – 2015-02-07 22:26:06

更改<select>取決於它的價值的顏色 - CSS只

回答

相關問題