如何将填充添加到html选择中的箭头中？
如何将填充添加到html选择中的箭头中？
提问于 2021-09-27 10:29:30
我想将填充添加到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;
}我也尝试过这，但是文本箭头看起来不太好。如果可以使用图标，我也可以使用arrow_drop_down图标。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-09-28 05:31:08
也许像这样的东西能帮上忙：
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>预览：
如果你有任何问题，请告诉我。
Stack Overflow用户
发布于 2021-09-27 12:01:32
如果您想更改下拉箭头和边框之间的间距，则不能--它是内置的浏览器控件--并且在不同的浏览器中看起来可能完全不同。唯一的选择是从头开始编写您自己的元素样式，这几乎是不值得的。一般情况下，不要太执着于控制用户体验的每一个方面--对于不同网站之间的控制一致性，有很多可说的话！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69345098
复制相关文章
相似问题
腾讯云开发者
