如何使用 css 设置选择选项的样式答案

【问题标题】：How to style select option with css如何使用 css 设置选择选项的样式
【发布时间】：2015-04-29 15:35:50
【问题描述】：

我需要用csssse select setse sets，所以它看起来像下面的图像，有2件我无法弄清楚，选择选项删除经典蓝色背景时，如何缩进文本，文本缩进不是为我工作，以及如何降低选项框。

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

【问题讨论】：

jsfiddle.net/noe4kgbf
我假设所示图像中的“选择”实际上不是选择，而是 div 和其他元素的组合。
您需要创建自定义选择。有趣的是，我现在正在创建一个：jsfiddle.net/jbutler483/nkb7903p/5
<select> 样式取决于用户代理，因此具有不同的实现。我知道 Chromium 可以使用一些 *webkit* pseudo-elemtn 选择器使用 shadow DOM 来设置样式。你可能最好使用一些第三方选择库，从可访问性的角度来看，它涵盖了所有内容，因为这可能很难做到。

标签： css select

【解决方案1】：

Select 标签几乎无法自定义，并且取决于浏览器的样式（尽管高度和宽度）。

如果您正在寻找跨浏览器兼容的可定制选项，您最好使用 CSS 构建和设置自己的样式。

我使用 jQuery 来完成这个功能。它还利用 span 来替换 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>

注意

这不是成品，仅供演示。

【讨论】：