如何通过CSS自定义select元素以实现这种深色样式? [英] How to customize a select element through CSS to achieve this dark style?
本文介绍了如何通过CSS自定义select元素以实现这种深色样式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何创建下图所示的选择元素?
How can I create a select element like the below image?
我的代码是
<select>
<option>-- Select City --</optoin>
<option>Delhi</option>
<option>Gurgaon</option>
</select>
这在jQuery中可用,但我想使用纯CSS.
This is available in jQuery, but I want to use pure CSS.
推荐答案
这是CSS驱动的选择菜单;您可以根据需要自定义它:
Here is a CSS-powered select menu; you can customize it as you need to:
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events: none;
}
.no-pointer-events .custom-select:after {
content: none;
}
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>
这篇关于如何通过CSS自定义select元素以实现这种深色样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文