Question

如何更改选择中的下拉选项的轮廓颜色？

这就是我目前所拥有的：

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

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

我尝试更改option:focus但是当我点击选择和下拉选项显示时，选项菜单有一个网络环彩色轮廓。如何更改轮廓颜色？

Answer 1

如果您想要高度自定义的选择，最好的选择就是自己制作。这是一个例子：

＆＃13;

$("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"))
  });

});

＆＃13;

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}

＆＃13;

<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="" />

＆＃13;

这很容易理解，你可以从普通选择中获得价值。主要区别在于，通过这种方法，您可以确保在支持css3的所有浏览器中具有相同的外观。

Answer 2

select标签有一个默认的实现样式，它在不同浏览器之间有所不同，但下面是css解决方案

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如何更改选择中下拉选项的轮廓颜色？

2 个答案: