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

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

How to style a select tag's option element?
Styling option value in select drop down html not work on Chrome & Safari

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

希望它有所帮助！

Answer 4

非常非常简单，但您可以相应地修改它。这不是为了看起来不错，只是为了提供这个想法。希望它有所帮助。

<强> 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");
    });
});

DEMO

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

Answer 6

这不适用于option条目，因为它是一个“系统”生成的下拉菜单，但您可以设置选择的padding。

只需将CSS中的box-sizing属性重置为content-box即可。

select的默认值为border-box。

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

Answer 7

我有一个小技巧来解决你的问题。但为此，你必须使用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'));
}

Answer 8

不填充，但是如果您的目标是简单地增大它，则可以增加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 9

如果需要，您可以使用font-size属性作为选项。

Answer 10

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

Answer 11

任意选项的任意缩进

如果只想缩进随机的任意<option />元素，则可以使用 ，它具有此处发布的解决方案最大的跨浏览器兼容性...

.optionGroup {
  font-weight: bold;
  font-style: italic;
}

<select>
    <option class="optionGroup" selected disabled>Choose one</option>
    <option value="sydney" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Sydney</option>
    <option value="melbourne" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Melbourne</option>
    <option value="cromwell" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Cromwell</option>
    <option value="queenstown" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;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。）就我个人而言，我认为规范的这一部分已损坏，但是您可以始终使用上面的 技巧将其缩进到第三，第四等缩进级别。

Answer 12

嘿家伙给选项文本填充的简单方法让我们使用像下面的检查

<option value="<?= $subc->gc_id ?>">&nbsp;&nbsp;&nbsp;<?php echo $subc->gc_title; ?> 
</option>

希望大家喜欢

Answer 13

只需设置选择标签的高度

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

Answer 14

您应该选择CSS而不是选择选项。

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

查看此文章Styling Select Box with CSS3了解更多样式选项。

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

14 个答案:

任意选项的任意缩进

选项的有序缩进