如何为 html select 中的箭头添加填充？

Question

我想在 HTML 选择中的箭头右侧添加填充 目前的样子。

我不想改变箭头的外观。只是想要右侧有一个填充。

这是 html 代码 -

<div class="blood-type">
<select class="rectangle">
    <option value="" disabled selected>Select One</option>
    <option *ngFor="let bg of bgList" [value]="bg.id">{{bg.name}}</option>
</select>

我尝试向矩形类和血型类添加填充，但两者都不起作用。

.blood-type{
    padding-right: 0.5rem; 
}

我也尝试过this，但文本箭头看起来不太好。如果可以使用图标，我也可以使用 arrow_drop_down 图标。

Answer 1

也许这样的事情可以有所帮助：

CSS：

select {
    -webkit-appearance: none;
    appearance: none;
    border: none;
}
.blood-type {
    position: relative;
    border: 1px solid black;
    border-radius: 2px;
    padding: 5px;
}
.blood-type::after {
    content: "▼";
    font-size: 1rem;
    right: 10px;
    position: absolute;
}
.rectangle {
    width: 100%;
}

HTML：

<div class="blood-type">
    <select class="rectangle">
        <option value="" disabled selected>Select One</option>
        <option *ngFor="let bg of bgList" [value]="bg.id">{{bg.name}}</option>
    </select>
</div>

预览：

如果您有任何疑问，请告诉我。

Answer 2

如果你想改变下拉箭头和边框之间的间距，你不能——它是一个内置的浏览器控件，在不同的浏览器中看起来可能完全不同。唯一的选择是从头开始编写自己的元素样式，这几乎肯定不值得这么麻烦。一般来说，尽量不要太执着于控制用户体验的各个方面 - 对于不同网站之间的控制一致性有很多话要说！

Answer 3

没有任何方法可以直接更改填充，但您可以使用边框来实现您想要的效果。

select {
  border: 0.5rem solid transparent
}

如果您还想添加边框，您可以在选择周围创建一个包装器并在其上添加边框

* {
  box-sizing: border-box;
}

select {
  padding: 8px 0px;
  border: none;
  border-left: 12px solid transparent;
  /* This adds the width between arrow and text */
  border-right: 12px solid transparent;
  background-color: transparent;
}

.select-border {
  border: 1px solid #ddd;
  border-radius: 8px;
  display: inline-block;
}

<div class="select-border">
  <select>
    <option>apple</option>
    <option>orange</option>
    <option>banana</option>
  </select>
</div>