如何设置 HTML 选择/选项标签的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17186866/
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 style HTML select/option tag?
提问by gen
I would like to create a dropdown menu with html select thus I would like to style it as well. I would like to set a padding to the option tags so they wouldn't be so overcrowded, but I can't do so. (it doesn't work) any idea?
我想创建一个带有 html select 的下拉菜单，因此我也想对其进行样式设置。我想为选项标签设置一个填充，这样它们就不会那么拥挤，但我不能这样做。（它不起作用）有什么想法吗？
#categories
{
padding: 10px 10px 10px 10px;
background-color: #826B78;
font-size: 20px;
color: white;
margin: 10px 10px 10px 10px;
border: none;
outline: none;
}
#categories option
{
margin: 30px 30px 30px 30px;
padding: 30px 30px 30px 30px;
font-size: 20px;
}
the categories id belongs to the select tag
类别 ID 属于选择标签
采纳答案by LegendaryAks
It is difficult to style select menu with css. The Best way of doing it is with jquery u can style and have a better control over the code with jquery. Just use a custom jquery like http://gregfranko.com/jquery.selectBoxIt.js/
很难用 css 样式选择菜单。最好的方法是使用 jquery，您可以使用 jquery 设置样式并更好地控制代码。只需使用像http://gregfranko.com/jquery.selectBoxIt.js/这样的自定义 jquery
I have just made an example of styling select with jquery, you can check the demo here
我刚刚用jquery做了一个样式选择的例子，你可以在这里查看演示
// Code to convert select to UL
$('.select').each(function() {
var $select = $(this).find('select'),
$list = $('<ul />');
$select.find('option').each(function() {
$list.append('<li>' + $(this).text() + '</li>');
});
//Remove the select after the values are taken
$select.after($list).remove();
//Append Default text to show the selected
$(this).append('<span>select</span>')
var firsttxt = $(this).find('li:first-child').text();
$(this).find('span').text(firsttxt)
// On click show the UL
$(this).on('click', 'span', function(e) {
e.stopPropagation();
$(this).parent().find('ul').show();
});
// On select of list select the item
$(this).on('click', 'li', function() {
var gettext = $(this).text();
$(this).parents('.select').find('span').text(gettext);
$(this).parent().fadeOut();
});
})
// On click out hide the UL
$(document).on('click', function() {
$('.select ul').fadeOut();
});body {
font-family: 'arial', san-serif;
}
.select {
width: 200px;
height: 30px;
border: 1px solid #ddd;
line-height: 30px;
position: relative;
margin-bottom: 40px;
}
.select span {
display: block;
color: #333;
font-size: 12px;
padding: 0 10px;
}
.select ul {
display: none;
background: #fff;
border: 1px solid #ddd;
min-width: 300px;
position: absolute;
top: 100%;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
z-index: 10;
}
.select ul > li {
font-size: 12px;
}
.select ul > li {
color: #333;
display: block;
padding: 2px 8px;
text-decoration: none;
line-height: 24px;
}
.select ul > li:hover {
background: #e4f4fa;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>First Select</label>
<div class="select">
<select>
<option>Item</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</div>
<label>Second Select</label>
<div class="select">
<select>
<option>this 1</option>
<option>this 2</option>
<option>this 3</option>
</select>
</div>回答by user5191261
Disabling the default setting can enable you a little more freedom - give your select a class, within that class use the following:
禁用默认设置可以让您获得更多自由 - 给您选择一个类，在该类中使用以下内容：
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
and then add in your default style
然后添加您的默认样式
回答by Tushar Gaurav
You can give style to select tag like this or you can use class name or id as well
您可以提供样式来选择这样的标签，也可以使用类名或 id
select
{
display: inline-block;
width: 150px;
height: 20px;
padding: 3px 6px;
margin-bottom: 10px;
font-size: 12px;
line-height: 20px;
color: #555555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
回答by johnny
html5 specification does not provide generic style properties to customize this user input control element. the only way found on net was using label element to reference this control for styling purpose
html5 规范不提供通用样式属性来自定义此用户输入控件元素。在网上找到的唯一方法是使用标签元素来引用此控件以用于样式目的
回答by Assembler
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
避免在此处使用 <select> 元素，因为它们无法在 WebKit 浏览器中完全设置样式。
According to those bootstrap people
据那些自力更生的人说
