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

Question

我想在 HTML select 中的箭头右侧添加填充 how it currently looks.

我不想改变箭头的外观。只需要在右侧填充。

这是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>

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

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

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

Answer 1

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

Answer 2

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

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>

预览：

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

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

How to add padding to the arrow present in html select?

html

css

html-select