CSS を使用して、両側に異なる色を使用して HTML5 範囲入力のスタイルを設定するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して、両側に異なる色を使用して HTML5 範囲入力のスタイルを設定するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-19 20:05:20

オリジナル

427 人が閲覧しました

How Can I Style HTML5 Range Inputs with Different Colors on Each Side Using CSS?

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

左側と右側に対照的な色が含まれるように HTML5 範囲入力をスタイル設定することは、よくあるリクエスト。ユーザーがスライダーを操作すると、色が動的に変化し、入力値に関する視覚的なフィードバックが得られます。純粋な CSS でこの効果を実現するのは難しいように思えるかもしれませんが、可能です。

Chrome の場合、秘訣は入力からのオーバーフローを隠し、ボックスシャドウを使用して残りの部分を埋めることです。希望の色で空間を演出します。このテクニックは、スライダーの左側をカスタムカラーで効果的にペイントします。

IE および Firefox では、組み込みの CSS 疑似要素を利用できます:

IE: ::-ms-fill- lower を使用すると、スライダーの下部のスタイルを設定できます。緑色を有効にします。
Firefox では、::-moz-range-progress で同様の制御が可能になり、スライダーの塗りつぶされた部分の色を定義できます。

CSS ソリューションを説明するには、次のコードを参照してください:

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

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

ログイン後にコピー

この CSS の使用コードを使用すると、スライダーの両側に異なる色を表示するように HTML5 範囲入力をスタイル設定して、Web アプリケーションに視覚的に魅力的で使いやすいインターフェイスを作成できます。

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