Html 选择选项填充在 chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22681141/
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
Select option padding not working in chrome
提问by Piyush Marvaniya
Select option padding not working in chrome
选择选项填充在 chrome 中不起作用
<style>
select option { padding:5px 0px; }
</style>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
回答by rmmoul
I just found a way to get padding applied to the select input in chrome
我刚刚找到了一种将填充应用于 chrome 中的选择输入的方法
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 5px;
}
Seems to work in the current chrome 39.0.2171.71 (64-bit) and safari (I only tested this on a mac).
似乎适用于当前的 chrome 39.0.2171.71（64 位）和 safari（我只在 mac 上测试过）。
This seems to remove the default styling added to the select input (it also removed the drop down arrow), but allows you to then use your own styling without chrome overriding it.
这似乎删除了添加到选择输入的默认样式（它还删除了下拉箭头），但允许您使用自己的样式而无需 chrome 覆盖它。
I stumbled across this fix while using code from here: http://fettblog.eu/style-select-elements/
我在使用这里的代码时偶然发现了这个修复：http: //fettblog.eu/style-select-elements/
回答by Matt
This simple hack will indent the text. Works well.
这个简单的技巧将缩进文本。效果很好。
select {
text-indent: 5px;
}
回答by Pravin Waychal
It seems that
看起来
Unfortunately, webkit browsers do not support styling of option tags yet.
不幸的是，webkit 浏览器还不支持选项标签的样式。
you may find similar question here
你可以在这里找到类似的问题
- How to style a select tag's option element?
- Styling option value in select drop down html not work on Chrome & Safari
The most widely used cross browser solution is to use ul li
最广泛使用的跨浏览器解决方案是使用ul li
Hope it helps!
希望能帮助到你！
回答by Ali Sufyan
I fixed it with this
我用这个修好了
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));
回答by DeeKayy90
Very, VERY simple idea, but you can modify it accordingly. This isn't set up to look good, only to provide the idea. Hope it helps.
非常非常简单的想法，但您可以相应地修改它。这不是为了看起来不错，只是为了提供想法。希望能帮助到你。
CSS:
CSS：
ul {
width: 50px;
height: 20px;
border: 1px solid black;
display: block;
}
li {
padding: 5px 0px;
width: 50px;
display: none;
}
HTML:
HTML：
<ul id="customComboBox">
 
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
Script:
脚本：
$(document).ready(function(){
$("#customComboBox").click(function(){
$("li").toggle("slow");
});
});
回答by user7286228
That's not work on optionentry because it's a "system" generated drop-down menu but you can set the paddingof a select.
这对option条目不起作用，因为它是“系统”生成的下拉菜单，但您可以设置padding选择的 。
Just reset the box-sizingproperty to content-boxin your CSS.
只需将box-sizing属性重置为content-box您的 CSS。
The default value of selectis border-box.
默认值select是border-box。
select {
box-sizing: content-box;
padding: 5px 0;
}
回答by Ozsvar Istvan
I have a little trick for your problem. But for that you must use javascript. If you detected that the browser is Chrome insert "dummy" options between every options. Give a new class for those "dummy" options and make them disabled. The height of "dummy" options you can define with font-sizeproperty.
我有一个小技巧可以解决你的问题。但为此，您必须使用 javascript。如果您检测到浏览器是 Chrome，请在每个选项之间插入“虚拟”选项。为那些“虚拟”选项提供一个新类并禁用它们。您可以使用font-size属性定义的“虚拟”选项的高度。
CSS:
CSS：
option.dummy-option-for-chrome {
font-size:2px;
color:transparent;
}
Script:
脚本：
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'));
}
回答by Waruna Manjula
No Jquery - No Third party js file
没有 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>smart code - use jquery
智能代码 - 使用 jquery
回答by orochi
option {
font-size:25px; //This is a place padding
}
回答by Rahul
You can use font-sizeproperty for option if you need.
font-size如果需要，您可以使用属性作为选项。
