gpt4 book ai didi

html - 下拉菜单: remove overlap between text and customised arrow in Chrome

转载 作者:行者123 更新时间:2023-12-02 04:25:43 25 4
gpt4 key购买 nike

如果可能的话,我想删除 Chrome 中箭头和文本之间的重叠部分。

这是在不同浏览器中发生的情况:

Dropdown Example

这是代码:

.search-options-wrapper select {
-webkit-appearance: none;
-moz-appearance: none;
background: url("http://i60.tinypic.com/w888ic.png") no-repeat 88px center;
background-size: 12px;
overflow:hidden;
display: flex;
border: 0;
}
<div class="search-options-wrapper"> 
<select id="options-primary">
<option>short text</option>
<option>Long text lalalalalaa</option>
</select>
</div>

最佳答案

我要做的是添加padding-right,其中将包含向下箭头的背景图像。然后更改其位置,使其不再距选择框左侧 88 像素。这样,文本就没有机会遇到您的箭头,因为它无法进入填充区域。

.search-options-wrapper select {
-webkit-appearance: none;
-moz-appearance: none;
background: url("http://i60.tinypic.com/w888ic.png") no-repeat right center;
background-size: 12px;
padding-right: 20px;
overflow: hidden;
display: flex;
border: 0;
}
<div class="search-options-wrapper">
<select id="options-primary">
<option>short text</option>
<option>Long text lalalalalaa</option>
</select>
</div>

关于html - 下拉菜单: remove overlap between text and customised arrow in Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27298661/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com