如何在 select 标签上设置填充

Question

为什么 select 标签上没有右填充14px ？
我在 Chrome - 最新版本

 .sel{ display:block; margin:0 auto; padding:0 14px; font-weight:500; height:31px; background:#007399; color:white; border-radius:25px; outline:none; }

 <select class='sel'> <option value = 'lorem'>LOREM</option> <option value = 'ipsum'>IPSUM</option> <option value = 'dolor'>DOLOR</option> <option value = 'sit'>SIT</option> </select>

Answer 1

如果您想在 select 下拉箭头的右侧获得额外的填充，则需要将 select 包装在div中，这样您也可以为箭头添加额外的填充。 例如：

<div class="select-container">
  <select>
    <option value = 'lorem'>LOREM</option>
    <option value = 'ipsum'>IPSUM</option>
  <select>
</div>

然后，在您的 SCSS 中：

.select-container {
  padding: 0 14px;
  select {
    border: none;
    /* rest of your rules */
  }
}