Introduction à l'utilisation de CSS pour modifier le style par défaut de la zone de sélection de la liste déroulante

Cet article utilise CSS pour modifier le style par défaut de la liste déroulantecase de sélection

Principe

Le principe est d'effacer la liste déroulante par défaut du navigateur. style de boîte vers le bas, puis appliquez-le. Téléchargez le vôtre et joignez une image d'une petite flèche alignée à droite. Bien entendu, la petite flèche de droite peut être implémentée à l'aide de pseudo éléments avant ou après.

select {  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("arrow.png") no-repeat right center;
  padding-right: 14px;
}/*清除ie的默认选择框样式清除，隐藏下拉箭头*/select::-ms-expand { display: none; }

Problèmes de compatibilité

IE8/9 ne prend pas en charge l'apparence : aucun CSSattribut, donc si nous devons être compatibles avec les versions inférieures du navigateur IE, nous devons ajouter un conteneur parent pour celui-ci. Le conteneur est utilisé pour couvrir la petite flèche, et puis ajoutez un droit de sélection. Le petit décalage ou la largeur est plus grande que l'élément parent. Définissez la propriété CSS du parent sur invisible au-delà de la zone pour couvrir la petite flèche. Ajoutez ensuite une image d'arrière-plan ou un pseudo-élément au conteneur parent pour implémenter une flèche personnalisée.

Code html :

<div id="parentDiv">
  <select>
      <option>a</option>
      <option>b</option>
      <option>c</option>
  </select></div>

Code css :

#parentDiv {
    background: url('ico.png') no-repeat right center;
    width: 80px;
    height: 34px;
    overflow: hidden;
}#parentDiv select {
    background: transparent;
    border: none;
    padding-left: 10px;
    width: 100px;
    height: 100%;
}

Défauts

La largeur de l'option déroulante sera plus large que sa conteneur parent, voir Cela semble un peu désordonné, cela dépend de votre propre choix et de la compatibilité du projet.

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!