选择选项填充在 chrome 中不起作用
<style>
select option { padding:5px 0px; }
</style>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
【问题讨论】：
我刚刚找到了一种将填充应用于 chrome 中的选择输入的方法
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 5px;
}
似乎适用于当前的 chrome 39.0.2171.71（64 位）和 safari（我只在 mac 上测试过）。
这似乎删除了添加到选择输入的默认样式（它也删除了下拉箭头），但允许您使用自己的样式而不用 chrome 覆盖它。
我在使用这里的代码时偶然发现了这个修复：http://fettblog.eu/style-select-elements/
这个简单的技巧将缩进文本。效果很好。
select {
text-indent: 5px;
}
【讨论】：
好像
不幸的是，webkit 浏览器还不支持选项标签的样式。
你可以在这里找到类似的问题
使用最广泛的跨浏览器方案是使用ul li
希望对你有帮助！
【讨论】：
我用这个修复了它
select {
max-height: calc(1.2em + 24px);
height: calc(1.2em + 24px);
}
max-height: calc(your line height + (top + bottom padding));
height: calc(your line height + (top + bottom padding));
【讨论】：
height: calc(1.2em + 24px); 而不是 max-height: calc(1.2em + 24px);
非常非常简单的想法，但您可以相应地修改它。这不是为了看起来不错，只是为了提供想法。希望对您有所帮助。
CSS：
ul {
width: 50px;
height: 20px;
border: 1px solid black;
display: block;
}
li {
padding: 5px 0px;
width: 50px;
display: none;
}
HTML：
<ul id="customComboBox">
 
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
脚本：
$(document).ready(function(){
$("#customComboBox").click(function(){
$("li").toggle("slow");
});
});
【讨论】：
这不适用于optionentry，因为它是“系统”生成的下拉菜单，但您可以设置选择的padding。
只需在 CSS 中将 box-sizing 属性重置为 content-box。
select 的默认值为border-box。
select {
box-sizing: content-box;
padding: 5px 0;
}
【讨论】：
我有一个小技巧可以解决你的问题。但为此，您必须使用 javascript。如果您检测到浏览器是 Chrome，则在每个选项之间插入“dummy”选项。为这些“dummy”选项提供一个新类并禁用它们。您可以使用 font-size 属性定义的“dummy”选项的高度。
CSS：
option.dummy-option-for-chrome {
font-size:2px;
color:transparent;
}
脚本：
function prepareHtml5Selects() {
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
if(!is_chrome) return;
$('select > option').each(function() {
$('<option class="dummy-option-for-chrome" disabled></option>')
.insertBefore($(this));
});
$('<option class="dummy-option-for-chrome" disabled></option>')
.insertAfter($('select > option:last-child'));
}
【讨论】：
不是填充，但如果您的目标只是让它变大，您可以增加font-size。并且将它与font-size-adjust 一起使用会在选择而不是选项上将字体大小减小到正常，因此最终会使option 更大。
不确定它是否适用于所有浏览器，还是会继续在当前版本中运行。
在 Chrome 85 和 Firefox 81 上测试。
select {
font-size: 2em;
font-size-adjust: 0.3;
}<label>
Select: <select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</label>【讨论】：
如果您只想缩进随机、任意的<option /> 元素，您可以使用&nbsp;，它在此处发布的解决方案中具有最大的跨浏览器兼容性...
.optionGroup {
font-weight: bold;
font-style: italic;
}<select>
<option class="optionGroup" selected disabled>Choose one</option>
<option value="sydney" class="optionChild"> Sydney</option>
<option value="melbourne" class="optionChild"> Melbourne</option>
<option value="cromwell" class="optionChild"> Cromwell</option>
<option value="queenstown" class="optionChild"> Queenstown</option>
</select>但如果您的数据有一些排序、有序的结构，那么建议您使用<optgroup/> 语法....
HTML 元素在一个元素中创建一组选项。 （来源：MDN Web Docs:
<optgroup>）
<select>
<optgroup label="Australia" default selected>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
</optgroup>
<optgroup label="United Kingdom">
<option value="london">London</option>
<option value="glasgow">Glasgow</option>
</optgroup>
</select>不幸的是，目前浏览器只允许并支持一个<optgroup /> 级别。 （来源：w3.org。）就我个人而言，我认为规范的那部分已损坏，但您始终可以使用上面的 &nbsp; 技巧扩展到第三、第四等缩进级别。
【讨论】：
没有 Jquery - 没有第三方 js 文件
function clickComboBox(){
comboOpt = document.getElementsByClassName("opt");
for (i = 0; i < comboOpt.length; i++) {
if (comboOpt[i].style.display === "block") {
comboOpt[i].style.display = "none";
} else {
comboOpt[i].style.display = "block";
}
}
}
function clickOpt(value1,text1){
document.getElementById("selectedValue").value=value1;
document.getElementById("customComboBox").innerHTML=text1;
clickComboBox();
}#customComboBox{
width: 150px;
height: 20px;
border: 1px solid #CCCCCC;
display: block;
padding: 2px 5px;
}
.opt{
padding: 5px 0px;background-color:#CCCCCC;
width: 160px;
display: none;
}<div id="customComboBox" onClick="clickComboBox()">
-Select Value-
</div>
<input type="hidden" id="selectedValue">
<div class="opt">
<div onClick="clickOpt('01','Test1')"><img src="https://pasteboard.co/J6940Vs.png" height="20">Test1</div>
<div style="padding-left:10px;" onClick="clickOpt('02','Test2')">Test2</div>
<div onClick="clickOpt('03','Test3')">Test3</div>
</div>智能代码 - 使用 jquery
【讨论】：
嘿家伙，让选项文本填充的简单方法让我们使用就像下面的检查
<option value="<?= $subc->gc_id ?>"> <?php echo $subc->gc_title; ?>
</option>
希望大家喜欢这个
【讨论】：
如果需要，您可以使用font-size 属性作为选项。
【讨论】：
您应该为您的 CSS 定位选择而不是选择选项。
select {
padding: 10px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
查看这篇文章Styling Select Box with CSS3 了解更多样式选项。
【讨论】：