添加填充以选择，但不添加选项标记

Question

我有一个简单的select下拉菜单，其中包含大量padding-left和padding-right：

如果您点击select输入，则会注意到option标记的padding-left和padding-right数量也相同。但是，我希望填充仅适用于select标记，而不是option标记（即option标记没有填充）。

我该怎么做？

select {
  width: 400px;
  background: lightgray;
  padding: 12px 48px;
}

<select>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
	<option>Option 4</option>
	<option>Option 5</option>
</select>

Answer 1

据我所知，选择框和下拉列表由浏览器引擎呈现。这意味着它们不会改变。

所以唯一的解决方案是使用框架（由于这个原因，有很多外部）或自己构建一个框架。

如果查看开发人员控制台，您还会看到选项元素的大多数样式都是由浏览器继承并且显示为灰色。

Answer 2

试试这个：

＆＃13;

＆＃13;

$(document).ready(function(){
    $('.sel').click(function(){
        $('ul').toggle();
    })

    $('li').click(function(){
        $('.sel input[type=text]').val($(this).html());
        $('ul').hide();
    })
})

＆＃13;

* {
    box-sizing: border-box;
}

.wrapper {
  width: 400px;
  position: relative;
  cursor: pointer;
}

.sel {
    position: relative;
    width: inherit;
    border: 1px solid #000;

}

.sel input[type="text"]{
    width: 100%;
    background: lightgray;
    padding: 12px 48px;
    border-style: none;
    outline: none;
    cursor: pointer;
}

.sel span {
    position: absolute;
    right: 25px;
    top: 10px;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: lightgray;
    width: 100%;
    display: none;
    z-index: 999;
}

li {
   padding: 10px 0;
}

li:hover {
    background-color: skyblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="sel">
        <input type="text" readonly="readonly" value="Option1"><span>▼</span>
    </div>
    <ul>
        <li>Option1</li>
        <li>Option2</li>
        <li>Option3</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;