So passen Sie den kleinen Dreiecksstil des Auswahlfelds an

In diesem Artikel wird hauptsächlich der ausgewählte benutzerdefinierte kleine Dreiecksstil vorgestellt. Durch Anpassen des kleinen Dreiecksstils können Freunde darauf verweisen it

Dieser Code ist die Lösung für den Großteil des Internets. Hier ist eine Zusammenfassung:

Machen Sie die Auswahl transparent, fügen Sie ein Span hinzu, um das Auswahlfeld zu ersetzen. Sie können das kleine anpassen Wählen Sie entweder den Dreiecksstil aus oder machen Sie den ausgewählten Text zentriert.

　　　　<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中

Der Anzeigeeffekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonSo passen Sie den kleinen Dreiecksstil des Auswahlfelds an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!