HTML5 範囲入力を 2 つの異なる色 (緑とグレー) でスタイルするにはどうすればよいですか?

明確な色を使用した HTML5 範囲入力のスタイル設定

問題:

視覚的に魅力的な範囲入力を実現するには、左側面が緑色、右側がgrey.

解決策:

この効果を実現するには、ブラウザー固有のスタイル設定が必要です。純粋な CSS ソリューションも可能ですが、ターゲットのブラウザによって異なります。

Chrome 用 CSS ソリューション:

• input[range] からのオーバーフローを非表示にします。
• を使用して、親指の前のスペースを希望の左側の色で塗りつぶします。 shadow.

IE 用の CSS ソリューション:

• 組み込みの ::-ms-fill- lower 擬似要素を使用して、左側の色。

の CSS ソリューションFirefox:

• 左側の色を設定するには、組み込みの ::-moz-range-progress 擬似要素を使用します。

コード例:

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  box-shadow: -80px 0 0 80px #43e5f7;
}

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

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

この CSS コードは、左側が範囲の入力は緑色で右側は灰色のままで、望ましい視覚効果が得られます。

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