Html 如何通过CSS自定义一个select元素来实现这种深色风格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10185762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to customize a select element through CSS to achieve this dark style?
提问by Rohit Azad
How can I create a select element like the below image?
如何创建如下图所示的选择元素？
My code is
我的代码是
<select>
<option>-- Select City --</optoin>
<option>Delhi</option>
<option>Gurgaon</option>
</select>
This is available in jQuery, but I want to use pure CSS.
这在 jQuery 中可用，但我想使用纯 CSS。
回答by Shailender Arora
Here is a CSS-powered select menu; you can customize it as you need to:
这是一个 CSS 驱动的选择菜单；您可以根据需要自定义它：
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>回答by eblue
Using the pointer-events:none;it will let you click through the arrow and will activate the select field, So the CSS would look like this for that element.
使用pointer-events:none;它会让您点击箭头并激活选择字段，因此该元素的 CSS 将如下所示。
.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;
}
回答by Miles
option{
background-image:url(image.png);
background-repeat: no-repeat;
}
回答by Kyle
There is no way to customise the select as you see it in your screenshot without Javascript.
如果没有 Javascript，就无法自定义您在屏幕截图中看到的选择。
You can see in this examplethat you can customise colors, padding and borders, but not the button itself.
您可以在此示例中看到您可以自定义颜色、填充和边框，但不能自定义按钮本身。
回答by codef0rmer
Even though you added a background image to the selectbox, you can not hide that handler on right hand side. I would recommend to use this : http://jamielottering.github.com/DropKick/
即使您向选择框添加了背景图像，也无法隐藏右侧的处理程序。我建议使用这个：http: //jamielottering.github.com/DropKick/
You just have to modify the CSS a bit to suit your need.
您只需要稍微修改 CSS 即可满足您的需要。
