如何向 select 下拉列表中的默认箭头添加填充？

Question

我正在尝试遵循 select 下拉列表的设计，其中：

填充：0 10px 0 10px

但是，根本没有调整箭头。它一直坚持到右端。请参阅附件截图以供参考。Front End Screenshot

You can also view my codes here

有没有办法瞄准特定的箭头并对其应用填充？（目的是使两侧的输入文本保持相同的填充）

谢谢！

Answer 1

对于那些有同样问题的人，我找到了如何设置默认 select“箭头”样式的方法，即用生成的内容替换它。

第 1 步：隐藏默认箭头

select {
  -webkit-appearance: none;
  appearance: none;
}

第 2 步：在 select 周围创建额外的包装器，因为 ::before/::after 不能这样工作。

<div class="select-wrapper"><select id="select" name="select">
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select></div>

第 3 步：应用生成的内容

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "▼";
  font-size: 1rem;
  top: 6px;
  right: 10px;
  position: absolute;
}

以上代码源自 Advanced form styling | MDN

Answer 2

除了上述答案之外，您最好向元素添加 z-index 以将伪元素 ::after 放置在原始 select 之后。否则当用户点击箭头时没有任何反应。

select {
    z-index: 10;
    position: relative;
    background: transparent;
}

.select-wrapper::after {
    z-index: 0;
}

Answer 3

没有包装器的解决方案div

<select id="birthDate.dateYear" name="birthDate.dateYear" >
         <option value="">Year</option>
         
            <option value="2004">2004</option>
         
            <option value="2003">2003</option>
         
            <option value="2002">2002</option>
         
    </select>

CSS

select {
  -webkit-appearance: none !important;
-moz-appearance: none !important;
background-color: #fafafa;
height: 45px;
width: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
background-position: 100%;
background-repeat: no-repeat;
border: 1px solid #ccc;
padding: 0.5rem;
border-radius: 0;
}

https://jsfiddle.net/aj4orwue/10/

Answer 4

我用了 border-right 属性并且有效。

select {
  border-right: 16px solid transparent
}

wrapper 元素和“:after”的问题在于，当您单击箭头图标时，它不会切换“select”下拉菜单。

工作示例： https://jsfiddle.net/asaad7/r8sx9m7e/

如何向 select 下拉列表中的默认箭头添加填充？

How to add padding to the default arrow in a select dropdown list?

html-select