CSS のみを使用して、HTML5 範囲入力を 2 つの異なる色でスタイル設定できますか?

HTML5 範囲入力を異なる色でスタイリングする

質問:

スタイルを設定することは可能ですか? HTML5 範囲入力でスライダーの両側に異なる色を表示するには?たとえば、左側が緑、右側がグレーでしょうか。理想的には、WebKit ブラウザと互換性のある純粋な CSS ソリューションが推奨されます。

解決策:

もちろん、純粋な CSS を使用してこのカスタマイズを実現することは可能です。私たちのソリューションは、ブラウザ固有の CSS プロパティを利用して、さまざまなブラウザをターゲットにします。

Chrome:

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

インターネットエクスプローラー:

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

HTML スニペット:

<input type="range"/>

このコード スニペットは、左側が緑色、右側が灰色の範囲入力を作成します。 。すべての主要なブラウザで完全な機能を使用するには、提供されているブラウザ固有のコード ブロックをすべて含めるようにしてください。

以上がCSS のみを使用して、HTML5 範囲入力を 2 つの異なる色でスタイル設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。