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

Question

我试图遵循选择下拉列表的设计，其中：

• 内边距：0 10 像素 0 10 像素

然而，箭头根本没有被调整。它始终粘在右端。请参阅随附的屏幕截图以供参考。前端截图

您也可以在这里查看我的代码

有没有办法定位特定箭头并向其应用填充？（旨在保持相同的填充应用于两侧的输入文本）

谢谢！

Answer 1

我使用了 border-right 属性并且它起作用了。

select {
  border-right: 16px solid transparent
}

包装元素和“:after”的问题在于，当您单击箭头图标时，它不会切换“选择”下拉列表。

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

Answer 2

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

\n

第 1 步：隐藏默认箭头

\n

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

\n

步骤 2：围绕 select 创建额外的包装器，因为 ::before/::after 不能以这种方式工作。

\n

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

\n

第 3 步：应用生成的内容

\n

.select-wrapper {\n  position: relative;\n}\n\n.select-wrapper::after {\n  content: "\xe2\x96\xbc";\n  font-size: 1rem;\n  top: 6px;\n  right: 10px;\n  position: absolute;\n}\n

\n

上面的代码源自\n高级表单样式 | MDN

\n

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/