Question

所以我无法想象我如何更改下拉箭头，我需要将其更改为另一个箭头：

原始

我希望它看起来像

我正在使用Chosen插件，我不知道这些效果一般是我对<select>的编辑。

继承人的PHP：

  <div class="paistofill">  

                              <select class="form-control bfh-countries chosen-select " data-country="PT">
                                <option value="PT">Portugal</option>
                                <option value="AF">Afghanistan</option>
                                <option value="AL">Albania</option>
                                <option value="DZ">Algeria</option>
                                <option value="AS">American Samoa</option>
                                <option value="AD">Andorra</option>
                                <option value="AO">Angola</option>
                                <option value="AI">Anguilla</option>
                                <option value="AQ">Antarctica</option>
                                (...)
                            </select>

CSS：

   select{
  -webkit-appearence:none;
   background-image:url("recursos/images/span/seta.png");
   background-repeat:none;
   background-position:right center;

 }

我虽然会这样做。什么都没改变，我该怎么办？

JSFiddle

Answer 1

chosen.css

中有这个课程

.chosen-container-single .chosen-single div b {
    display: block;
    width: 100%;
    height: 100%;
    background: url('chosen-sprite.png') no-repeat 0px 2px;
}

使用此图片https://harvesthq.github.io/chosen/chosen-sprite.png

因此请更改背景图像。

Answer 2

请尝试以下代码。

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("recursos/images/span/seta.png");
  background-repeat: none;
  background-position: right center;
}

Answer 3

Check this fiddle here

您必须在CSS中进行一些更改并尝试使用父容器进行样式选择，

您的CSS ，

select { 
    font-family: 'Hind Madurai','Segoe UI','Helvetica Neue', sans-serif;
    background:#F9F9F9;
    color:#111111;
    border:1px solid #CCCCCC;
    border-radius:5px;
    padding: 8px 15px;
    font-size:15px;
    letter-spacing:0.05em;
    width:300px; 
    margin: 0 0 20px 0; 
    max-width: 100%; 
    resize: none;
    -webkit-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.paistofill select {
    -webkit-appearance: none;
       -moz-appearance: none;
    cursor: pointer;
    background:url(https://s31.postimg.org/9rchnwbwr/down_arrow.png) no-repeat #F9F9F9;
    background-position: 96% 12px;
    text-indent: 0.01px;
    text-overflow: "";
}

.paistofill select option {
    background:#FFFFFF;
   color:#111111;
}

如何使用Chosen插件更改选择中的箭头？

3 个答案: