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

Posted 2023-02-18

【中文标题】如何为 html select 中的箭头添加填充？

【英文标题】：How to add padding to the arrow present in html select?

【发布时间】：2021-11-19 12:20:08

【问题描述】：

我想在 html 选择中的箭头右侧添加填充 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>

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

.blood-type
    padding-right: 0.5rem; 

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

【问题讨论】：

请提供代码示例，您尝试了什么，错误是什么。查看：***.com/help/how-to-ask 和 ***.com/help/minimal-reproducible-example

我同意@kmp。请添加代码示例，以便我们评估问题所在。

你应该用div包裹select，并自定义div而不是select

@kmp 感谢您的信息，更新了代码。

@YevheniiShlapak 是的，我试过了，不行。

【参考方案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>

预览：

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

【讨论】：

我已经尝试过这个（问题中提到）。下拉菜单对我来说很奇怪。如果可能的话，我可以使用this icon 而不是普通的文本图标（“▼”）。

@AyushPatwari，当然，您只需要更改.blood-type::after 中的“内容”标签。

【参考方案2】：

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

【讨论】：

实际上自定义箭头没什么大不了的。这需要一些编码，但如果它使您的设计更易读、更流畅，那当然值得

我想我愿意加倍努力。各位大神能提供点好的资源吗？

那里有很多教程 - 例如W3schools 有一个。