焦點丟失後，樣式變化仍然保持在選擇狀態？

Question

我有一個頁面有多個選擇下拉菜單，並且想知道是否有一些簡單的方法，一旦一個元素被選中並失去焦點，它會保留一個樣式變化 - 這樣用戶就可以看到他選擇了哪些元素即我可能會在每個選擇周圍有一個小的綠色邊框，這是默認的「-select-」值之外的東西。我不是一個編碼器，它上面有大約240個選擇，以及其他我不舒服的代碼。

我可以突出顯示行並選擇使用僞類，但無法找到保留視覺提示的簡單方法。

http://i.stack.imgur.com/PLcpX.jpg

Answer 1

據我所知，這不能用純CSS完成。

但是你可以使用JavaScript這樣來達到同樣的效果：

document.addEventListener('change', function(event){ 
    var element = event.target; 
    if(element.tagName == 'SELECT'){ 
     element.style.border = "1px solid green"; 
    } 
}); 

https://jsfiddle.net/xm1txLws/

UPDATE

要檢查是否默認選項重新選中，您需要執行一個額外的檢查（如果所選選項未給出值標記，則該值變爲包含文本）：

document.addEventListener('change', function(event){ 
    var element = event.target; 
    if(element.tagName == 'SELECT'){ 
     element.style.border = "1px solid green"; 
     if(element.value == '-select-'){ 
      element.style.border = "none"; 
     } 
    } 
}); 

https://jsfiddle.net/xm1txLws/3/