How to customize the small triangle style of the select box

This article mainly introduces the select custom small triangle style. It shows the operation process in detail through css HTML js code. Customizing the small triangle style can also create the effect of centering the select text. Friends who need it can refer to it

This code is the solution for most of the Internet. Here is a summary:

Make the select transparent, add a span on it to replace the select box, you can customize the small triangle style, or you can Make the select text centered.

　　　　<p class="ui-select">
     <span>使用加息券或现金券 <i class="icon-down lMar10"></i></span>
     <select name="" id="">
      <option value="10元现金券">10元现金券</option>
      <option value="20元现金券">20元现金券</option>
      <option value="30元现金券">30元现金券</option>
      <option value="40元现金券">40元现金券</option>
     </select>
    </p>

.ui-select{
 width:75%;
 height:63px;
 line-height:63px;
 background-color:#ECAFB4;
 color:#fff;
 padding:0 30px;
 text-align: left;
 position: relative;
}
select{
 width:100%;
 height:63px;
 line-height:33px;
 opacity: 0;
 position: absolute;
 top:0;
 left:0;
}

/*小三角图标*/
.icon-down{
 display: inline-block;
 width:30px;
 height:16px;
 background: url("../image/newWap/wapIcons.png") -168px -96px no-repeat;
}

$(".ui-select select").change(function(){
  $(this).prev("span").html($(this).find("option:selected").val()+&#39;<i class="icon-down lMar10"></i>&#39;);
})
//select监测option的值的变化，添加到span中

The display effect is as shown in the figure:

The above is the detailed content of How to customize the small triangle style of the select box. For more information, please follow other related articles on the PHP Chinese website!