CSS効果:CSSドロップダウンリストselectボックスのデフォルトスタイルを変更する

げんり

ブラウザのデフォルトのドロップダウンスタイルをクリアし、自分のものを適用し、右に小さな矢印を揃えた画像を添付すればいいのが原理です.もちろん、右側の小さな矢印は、擬似要素beforeまたはafterで実現することができる.

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; }

互換性の問題

IE 8/9はappearance:none CSSプロパティをサポートしていないため、低バージョンのIEブラウザと互換性が必要な場合は、小さな矢印を上書きするための親コンテナを追加し、selectに右側の小さなオフセットまたは幅が親より大きい要素を追加する必要があります.親レベルのCSS属性が部分的に見えないように設定すると、小さな矢印が上書きされます.次に、親コンテナにバックグラウンドピクチャまたは擬似要素を追加して、カスタム矢印を実装します.
htmlコード:

<div id="parentDiv">
  <select>
      <option>aoption>
      <option>boption>
      <option>coption>
  select>
div>

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%;
}

けっかん

ドロップダウンオプションの幅は、親コンテナよりも広く、少し違和感があるように見えますが、自分の取捨選択問題とプロジェクトの互換性の問題によって異なります.