选择不在chrome中工作的选项填充

Question

选择不在chrome中工作的选项填充

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

Answer 1

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

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
}

似乎在当前的chrome 39.0.2171.71(64位)和safari中工作(我只在mac上测试过).

这似乎删除了添加到选择输入的默认样式(它还删除了下拉箭头),但允许您使用自己的样式而不覆盖它.

我在使用此处的代码时偶然发现了这个问题:http://fettblog.eu/style-select-elements/

Answer 2

这个简单的黑客将缩进文本.效果很好.

select {
  text-indent: 5px;
}

Answer 3

看起来

不幸的是,webkit浏览器还不支持选项标签的样式.

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

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

最广泛使用的跨浏览器解决方案是使用ul li

希望能帮助到你!

Answer 4

不是填充，但如果您的目标只是使其更大，则可以增加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>

Answer 5

我用这个修好了

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));