如何使用CSS樣式選擇選項

Question

我需要用css設置我的選擇的樣式，所以它看起來像下面的圖片，有兩件事我無法弄清楚，當選擇選項時，刪除經典的藍色背景，如何使文本縮進，text-indent對我不起作用，以及如何降低選項框。

 <select name="txtCountry">
    <option>Select Country</option>
    <option value="1">Georgia</option>
    <option value="2">Afghanistan</option>
</select>

Answer 1

Select標記幾乎不可能自定義，並且在樣式上（盡管高度和寬度）都受瀏覽器的左右。

如果您正在尋找跨瀏覽器兼容的可定制選項，那么使用CSS構造和設置自己的樣式會更好。

我使用jQuery來完成此功能。 它還使用跨度來替換option標簽，從而可以進行進一步的樣式設置（盡管有很多可用的庫，但無需外部庫）：

 $('.item').hide(); $('.item').click(function () { var x = $(this).text(); $(this).siblings(".selected").text(x); $(this).slideUp().siblings(".item").slideUp(); }); $('.Drop').click(function () { $(this).parent().toggleClass("opened"); $(this).siblings(".item").slideToggle(); }); $('.selected').click(function () { $(this).parent().removeClass("opened"); $(this).siblings(".item").slideUp(); }); 

 div { height:30px; width:200px; background:lightgray; position:relative; } .item, .selected { display:block; height:30px; width:100%;position:relative; background:gray; transition:all 0.6s; line-height:30px; } .selected { background:none; display:block; } .item:hover { background:lightgray; } .Drop { position:absolute; top:0; right:0; height:100%; width:30px; background:tomato; transition:all 0.4s; transform:rotate(0deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span class="selected">1</span> <span class="Drop"></span> <span class="item">1</span> <span class="item">2</span> <span class="item">3</span> <span class="item">4</span> <span class="item">5</span> <span class="item">6</span> </div> 

注意

這不是成品，僅用於演示。