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

这是我目前有：

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

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

回答

相关问题