Question

我正在尝试设置附言png只是一个15px x 10px的向下箭头

Answer 1

您可以考虑使用渐变色

select {
   background:
     /*to replace the arrow*/
     linear-gradient(to bottom right,#fff 48%,transparent 50%) right 7px top 50%/8px 10px,
     linear-gradient(to bottom left,#fff 48%,transparent 50%) right 15px top 50%/8px 10px,     
    /*  remove the above gradient and uncomment the below to use your arrow
        url(media/icons/down_arrow.png) right 5px top 50%/15px 10px,
    */   
    var(--c,linear-gradient(#939393,#595959)) right/30px 100%,
    linear-gradient(#fffff9,#cfced5);
   background-repeat:no-repeat;
   font-size: 18px;
   padding:10px 40px 10px 10px;
   border: 2px solid #777;
   border-radius: 10px;
   color: #000;
   -webkit-appearance: none;
   box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
}
select:active, select:focus, select:hover {
  border: 2px solid #55E;
  /*Used a variable to avoid repeating all the background definition*/
  --c:linear-gradient(#6c81b7,#264091);
}

<select>
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>

设置<select>下拉列表的样式

1 个答案: