Heim  >  Artikel  >  Web-Frontend  >  So passen Sie den kleinen Dreiecksstil des Auswahlfelds an

So passen Sie den kleinen Dreiecksstil des Auswahlfelds an

巴扎黑
巴扎黑Original
2017-08-21 10:36:031570Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn