如何更改選擇中下拉選項的輪廓顏色？

這是我目前有：

select:focus{ 
 
    outline-color: #986fa5; 
 
}

<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select>

我試圖改變option:focus，但尚未當我點擊選擇，並且下拉選項顯示，在選項菜單中有一個網 - 色的輪廓。如何更改該輪廓顏色？

來源

2017-04-03 user3494047

你在，你可以做風格選擇列表什麼相當有限。通常如果你想對它們進行風格化，你應該使用一個將它轉換爲HTML的插件，並允許你像普通元素一樣進行設計。這是一個流行的插件，它將轉換選擇的https://select2.github.io/ –

如果你想要一個高度自定義的選擇，你最好的選擇是自己做。這裏有一個例子：

$("document").ready(function() { 
 

 
    $(".option").click(function() { 
 
    $(".option").slideDown(); 
 
    }); 
 

 
    $(".option:not(.selected)").click(function() { 
 
    $(".option:not(.selected)").slideUp(); 
 
    $(".option.selected").text($(this).text()) 
 
    $("#selectVal").val($(this).data("value")) 
 
    }); 
 

 
});

li { 
 
    list-style: none 
 
} 
 

 
.option { 
 
    display: none 
 
} 
 

 
.option:first-child { 
 
    display: block 
 
} 
 

 
.option:not(.selected):hover { 
 
    background: red 
 
} 
 

 
#select { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    cursor: pointer 
 
} 
 

 
#select img{width:30px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="select"> 
 
    <li class="option selected">--</li> 
 
    <li class="option" data-value="0"><img src="http://www.flags.net/images/largeflags/SPAN0002.GIF" alt=""/>Spain</li> 
 
    <li class="option" data-value="1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/255px-Flag_of_Portugal.svg.png" alt=""/>Portugal</li> 
 
</ul> 
 
<input id="selectVal" type="hidden" value="" />

這很容易理解，你可以得到的價值，你會從一個共同的選擇得到它。主要區別在於，通過這種方法，您可以確保在支持css3的所有瀏覽器中擁有相同的外觀。

來源

2017-04-03 22:23:48

選擇標記有一個默認的實現風格，將瀏覽器之間有所不同，但下面是一個CSS的解決方案

#d option:last-child { 
 
    border-bottom: solid red 2px; 
 
    overflow: visible; 
 
} 
 

 
#d option:first-child { 
 
    border-top: solid red 2px; 
 
} 
 

 
#d option { 
 
    border-left: solid red 2px; 
 
    border-right: solid red 2px; 
 
}

<div> 
 
    <select id="d"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select> 
 
</div>

來源

2017-04-03 22:33:59 repzero

當我在代碼段 – user3494047

中運行它時，它不起作用在firefox 45.3的下拉菜單上顯示輪廓紅色。我不能說你的瀏覽器或瀏覽器版本是否支持這種下拉式樣。你使用的是什麼瀏覽器？ – repzero

啊我明白了。我正在使用鉻 – user3494047

如何更改選擇中下拉選項的輪廓顏色？

回答

相關問題