如何将填充添加到选择下拉列表中的默认箭头？ [英] How to add padding to the default arrow in a select dropdown list?

问题描述

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

• 填充：0 10px 0 10px

然而，箭头根本没有调整。它一直坚持在正确的一端。请参阅所附截图以供参考。Front End Screenshot

You can also view my codes here

有没有办法瞄准特定的箭头并对其应用填充？(旨在保持相同的填充应用于两面的输入文本)

谢谢！

推荐答案

对于那些有相同问题的人，我找到了一个解决办法，即如何使用生成的内容替换默认选择箭头的样式。

第1步：隐藏默认箭头

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

第二步：在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

这篇关于如何将填充添加到选择下拉列表中的默认箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！