Question

我在选择元素中更改插入符号的颜色时遇到问题。

我试图从github库中插入元素插入符号，但那不能显示，因为选项标记不支持其他html元素。

我也加入了css

-webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;

如何在不插入图像的情况下添加插入符号

HTML

<select class="selectlokacija">

                      <option value="volvo">Choose option <span><i class="fa fa-chevron-down location"></i></span></option>
                      <option value="saab">2002</option>
                      <option value="mercedes">2005</option>
                      <option value="audi">2008</option>
                    </select>

CSS

.selectlokacija{
width:230px;
padding:10px;
color:white;
background-color:#3E6373;
font-size:15px;
font-family: 'Roboto', sans-serif;
border-radius:5px;
-webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;

}

Answer 1

如果我的理解是正确的

您可以使用背景图像进行选择输入，如下所示

摆弄here

<强> 码

<强> HTML

<select class="selectlokacija">
    <option value="volvo">Choose option</option>
    <option value="saab">2002</option>
    <option value="mercedes">2005</option>
    <option value="audi">2008</option>
</select>

<强> CSS

.selectlokacija {
    width:230px;
    padding:10px;
    color:#fff;
    background:#3E6373 url("http://s6.postimg.org/yzxyb2kv1/arrow.png") no-repeat 90% 50%;;
    font-size:15px;
    font-family:'Roboto', sans-serif;
    border-radius:5px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;

}

希望这会有用

Answer 2

如果您不想使用图片，可以创建像这样的css插入符号。 https://css-tricks.com/snippets/css/css-triangle/

要将它添加到原始选择插入符号的位置，您必须将它们都包含在位置相对标记中，并为箭头设置绝对位置。

为什么我不能在select元素中改变插入符号的颜色

2 个答案: