HTML5 範囲入力を両側に異なる色でスタイルするにはどうすればよいですか?

各側で異なる色を使用した HTML5 範囲入力のスタイル設定

HTML5 範囲入力のスライダーの前後でさまざまな色を実現するには、ブラウザーが必要です。特定の

Chrome:

• input 要素で overflow: hidden と width を設定してデフォルトのスライダーを非表示にします。
• 領域を塗りつぶします
• カスタム スライダー サムを作成し、配置します。親指の自然な位置の右に 80 ピクセル。
• デフォルトの親指を完全に覆うために、カスタムの親指が入力の幅より大きいことを確認してください。

IE:

• ::-ms-fill- lower 擬似要素を利用して設定しますサムの左側の背景色。
• サムの右側の背景色を設定するには、::-ms-fill-upper を使用します。

Firefox :

• ::-moz-range-progress 疑似要素を使用して設定しますサムの左側の背景色。
• ::-moz-range-track を使用してトラックの背景色を設定します。

コード例:

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

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

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

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}

input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}

<input type="range" />

以上がHTML5 範囲入力を両側に異なる色でスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。