CSS を使用してドロップダウン リスト選択ボックスのデフォルト スタイルを変更する方法の概要

この記事では、CSS を使用して ドロップダウン リスト 選択ボックスのデフォルト スタイルを変更します

原則

原則は、ブラウザのデフォルトのドロップダウン ボックス スタイルをクリアし、独自のドロップダウン ボックス スタイルを適用し、右のスタイルを追加することです。小さな矢印が並んでいるだけです。もちろん、右側の小さな矢印は、前以降の疑似要素を使用して実装できます。

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

IE8/9 は、Appearance:none をサポートしていません CSS

を使用するため、IEブラウザの下位バージョンと互換性を持たせる必要がある場合は、その親コン​​テナを追加する必要があります。コンテナは小さな矢印をカバーするために使用され、その後、右側に小さなオフセットを追加します。または、選択レベル要素の親よりも大きい幅。親の CSS プロパティを、小さな矢印を覆う領域を超えて非表示に設定します。次に、背景画像または疑似要素を親コンテナに追加して、カスタム矢印を実装します。 html コード:

<div id="parentDiv">
  <select>
      <option>a</option>
      <option>b</option>
      <option>c</option>
  </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%;
}

欠点

ドロップダウン オプションの幅は親コンテナよりも広くなり、少し統一されていないように見えます。これは、独自の選択と互換性によって異なります。プロジェクト。

以上がCSS を使用してドロップダウン リスト選択ボックスのデフォルト スタイルを変更する方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。