选择选项填充不适用于Chrome

选择选项填充不适用于Chrome

<style>
select option { padding:5px 0px; }
</style>    
<select>
<option>1</option>
<option>2</option>
<option>3</option> 
</select>

我刚刚找到了一种将填充应用于chrome中的select输入的方法

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浏览器尚不支持选项标签的样式。

您可能会在这里找到类似的问题

1. 如何设置选择标签的选项元素的样式？
2. 选择下拉HTML中的样式选项值不适用于Chrome和Safari

使用最广泛的跨浏览器解决方案是使用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));

非常非常简单的想法，但是您可以对其进行相应的修改。这个设置看起来并不好，只是为了提供想法。希望能帮助到你。

CSS：

ul {
    width: 50px;
    height: 20px;
    border: 1px solid black;
    display: block;

}

li {
    padding: 5px 0px;
    width: 50px;
    display: none;

}

HTML：

<ul id="customComboBox">
&nbsp
    <li>Test</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

脚本：

$(document).ready(function(){
    $("#customComboBox").click(function(){
        $("li").toggle("slow");
    });
});

演示

这在option输入时不起作用，因为它是一个“系统”生成的下拉菜单，但是您可以设置padding一个select。

只需将box-sizing属性重置为content-boxCSS即可。

默认值select是border-box。

select {
 box-sizing: content-box;
 padding: 5px 0;
}

对于您的问题，我有一些技巧。但是为此，您必须使用javascript。如果您检测到浏览器是Chrome浏览器，请在每个选项之间插入“ 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>

没有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

您可以font-size根据需要使用属性作为选项。

只需设置选择标签的高度

select{
    height: 30px;
    max-height: 30px;
}

您应该将select定位为CSS而不是select选项。

select { 
padding: 10px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

查看本文，使用CSS3对选择框进行样式设置以获取更多样式选择。