嗨，我正在设计一个跨浏览器选择，以便在 chrome、IE、ff 和 safari 浏览器中具有与我的下拉菜单相同的设计。这很好用!我使用了以下代码:
label {
font-family: Arial;
}
select {
transition: border-color ease-in-out 0.15s;
background: transparent;
border: 1px solid $BORDER_COLOR;
outline: 0;
padding: 5px;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: radio-container;
appearance: none;
}
<body>
<label>City</label>
<select>
<option>Zurich</option>
<option>Vienna</option>
<option>Berlin</option>
</select>
</body>我现在想念的是一个箭头图标，它表明这是一个下拉菜单(像往常一样)。我还想添加我的服装图标 (svg)。我用这个CSS尝试过:
background: url("arrow_down_grey.svg") no-repeat center right;
箭头位于正确的位置(右中心)并且具有正确的大小，但前提是选择的宽度足够大。当选择不够长时，图标位于文本内，如下所示:
我现在的想法是将其添加到我选择的伪“之后”中。我在互联网上找到的每个教程都没有真正起作用。有人能帮我吗？
谢谢!
最佳答案
您可以将元素的 padding-right 设置为等于图像的宽度。如果这样做，元素的内容将在图像开始的位置之前被截断(如下面的代码片段所示)。
label {
font-family: Arial;
}
select {
transition: border-color ease-in-out 0.15s;
background: transparent;
border: 1px solid $BORDER_COLOR;
outline: 0;
padding: 5px 25px 5px 5px;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: radio-container;
appearance: none;
background: url("/image/RGBNj.png") no-repeat center right;
}<body>
<label>City</label>
<select>
<option>Zurich</option>
<option>Vienna</option>
<option>Berlin</option>
</select>
<br><br>
<label>Country</label>
<select>
<option>United States of America</option>
<option>India</option>
<option>England</option>
</select>
</body>关于css - 在选择之后添加 svg-icon(箭头)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37338840/