css - 如何使用CSS样式化选择选项

Question

我需要用 css 设计我的选择，所以它看起来像下图，有两件事我想不通，当选择选项时删除经典的蓝色背景，如何缩进文本，文本缩进不是为我工作，以及如何降低选项框。

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

Answer 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>

注意

这不是成品，仅供演示。