Comment personnaliser le style du petit triangle de la zone de sélection

Cet article présente principalement le style de petit triangle personnalisé. Il montre le processus de fonctionnement en détail via le code CSS HTML js. La personnalisation du style de petit triangle peut également créer l'effet de centrage du texte sélectionné. it

Ce code est la solution pour la plupart des internautes. Voici un résumé :

Rendez la sélection transparente, ajoutez un span dessus pour remplacer la boîte de sélection, vous pouvez personnaliser la petite. style de triangle, ou vous pouvez centrer le texte sélectionné.

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

L'effet d'affichage est le suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!