如何在 Safari 和 chrome 的选择框（下拉框）中设置高度或填充？答案

【问题标题】：How to set height Or Padding in select box (dropdown box) for safari and chrome?如何在 Safari 和 chrome 的选择框（下拉框）中设置高度或填充？
【发布时间】：2016-07-06 23:38:27
【问题描述】：

我想在选择框中设置高度或宽度。

<?php $subjectList=array('0'=>'Questions','1'=>'Feedback / Suggestions','2'=>'Location Owner Inquiry' ,'3'=>'Other');?>

<select name="vSubject" data-errormessage-value-missing="Select Reason!" id="vSubject"  >
   <option value="" >-Select One-</option>
   <?php foreach($subjectList as $r=>$k) { ?>
         <option value="<?php echo $r?>" ><?php echo $k?></option>
   <?php }?>
</select>

填充和高度在 SAFARI 中不起作用。所以建议一些解决方案。

【问题讨论】：

stackoverflow.com/questions/13252835/… 的可能重复项
那么“选项”呢？如果我想设置高度或填充，thn ?

标签： javascript jquery html css safari

【解决方案1】：

您是否为下拉菜单尝试过这个 CSS？

overflow: hidden;
border: none;
outline: none;
-webkit-appearance: none;

对于 Safari 你可以试试

-webkit-appearance: menulist-button;

这样宽度和高度才能起作用 (link)

然后您可以使用背景、字体系列、填充等来进一步附魔您的自定义选择标签。它在 Safari/Chrome/FF 中对我有用...

编辑：

编辑选项标签并不容易。您可以使用下面的 css，但不幸的是，所有内容都无法自定义

select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

来源：1,2

【讨论】：

那么“选项”呢？如果我想设置高度或填充，thn ?
选项是您无法正确编辑的一件事。我认为背景属性有效（颜色和东西），但高度和填充恐怕不行。查看我编辑的答案

【解决方案2】：

Fiddle here 结合使用 text-indent 和 line-height 来创造填充的错觉。在 Safari 中工作。在 IE 中也应该工作。

#vSubject {
    text-indent:15px; line-height:28px;
}

【讨论】：

【解决方案3】：

像这样试试。

select {
 width: 170px; 
 height: 25px;
 -webkit-appearance: menulist-button;
}

【讨论】：

那么“选项”呢？如果我想设置高度或填充，thn ?

【解决方案4】：

select { line-height : 28px; float : left; }

【讨论】：