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

I have problem with changing color of caret in select element.

我在选择元素中改变插入符号的颜色有问题。

I tried to insert element caret from github library but thats can't display, because option tag not support other html elements.

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

Also I added in css

我也加入了css

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

How can I add caret without inserting image

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

HTML

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

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;

}

2 个解决方案

#1

If my understanding is correct

如果我的理解是正确的

you can use background image for select input as shown below

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

fiddled here

在这里摆弄

code

码

HTML

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

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;

}

hope this will work

希望这会奏效

#2

If you don't want to use a picture you can create a css caret like this. https://css-tricks.com/snippets/css/css-triangle/

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

To add it on the place of the original select caret you will have to wrap both of them position relative tag and set a position absolute for the arrow.

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