さまざまなブラウザーで HTML5 範囲入力スライダーの外観をカスタマイズするにはどうすればよいですか?-CSSチュートリアル-php.cn

さまざまなブラウザーで HTML5 範囲入力スライダーの外観をカスタマイズするにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-25 18:12:11

オリジナル

989 人が閲覧しました

How Can I Customize the Appearance of HTML5 Range Input Sliders in Different Browsers?

WebKit の HTML5 範囲入力スライダーの色付け

WebKit ベースのブラウザーは、一貫した外観のネイティブ範囲入力スライダーを表示します。ただし、カスタムスタイルを追加してこのスライダーの外観を変更するのは難しい場合があります。

Chrome の場合:

オーバーフロートリック: 非表示overflow: hidden on the input.
Shadow を設定することによるデフォルトのスライダー効果: 親指の左側のスペースを希望の色で埋める影効果を作成します。

IE および Firefox (ネイティブサポート) の場合:

::-ms-fill- lower: この疑似要素を IE で使用しますサムの下の領域を塗りつぶします。
::-moz-range-progress: Firefox でこの疑似要素を使用して、サムの前の領域を塗りつぶします。

CSS コード実装:

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    -webkit-appearance: none;
    background-color: #9a905d;
  }

  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    cursor: ew-resize;
    background: #434343;
    box-shadow: -80px 0 0 80px #43e5f7;
  }
}

/* Firefox */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}

/* IE */
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

ログイン後にコピー

HTML 例: