Question

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

<?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中不起作用。所以建议一些解决方案。

Answer 1

您是否尝试使用此CSS进行下拉？

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

对于Safari，您可以尝试

-webkit-appearance: menulist-button;

以便宽度和高度起作用（link）

然后您可以使用background，font-family，padding等来进一步为自定义选择标记附魔。它在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

Answer 2

Fiddle here 使用text-indent和line-height的组合来创建填充的错觉。在Safari中工作。也可以在IE中工作。

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

Answer 3

尝试这样。

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

Answer 4

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

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

4 个答案: