HTML5 範囲入力タイプをプログレスバーのようにカスタマイズする方法

HTML5 範囲入力タイプの外観のカスタマイズ

HTML5 範囲入力タイプは、指定された範囲内のユーザー入力を収集する便利な方法を提供します。デフォルトでは、ブラウザーはネイティブ スタイルで範囲入力をレンダリングしますが、これは必ずしも目的の UI デザインと一致するとは限りません。この記事では、CSS を使用して範囲入力タイプの外観をカスタマイズし、プログレス バーのような外観を実現する方法を検討します。

問題ステートメント:

" HTML5 範囲入力タイプの外観をプログレスバーに似せるように変更したいのですが、CSS クラスで CSS 属性を適用しても効果がないようです。"

解決策:

範囲入力タイプの外観をカスタマイズするには:

1. ネイティブ スタイルの削除: -webkit-Appearance: none ! important CSS プロパティを使用してブラウザのデフォルトをオーバーライドしますスタイリング。これにより、適用するカスタム スタイルが確実に優先されます。
2. 背景の設定: 範囲入力トラックの背景色と高さをカスタマイズするには、背景プロパティを設定します。
3. 親指のカスタマイズ: -webkit-slider-thumb 擬似要素の背景、高さ、幅のプロパティを設定して、親指 (ハンドル) の外観を変更します。

CSS コード:

<code class="css">input[type='range'] {
    -webkit-appearance: none !important;
    background: red;
    height: 7px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: blue;
    height: 10px;
    width: 10px;
}</code>

この CSS コードを適用すると、標準の範囲入力タイプを、色付きのトラックとハンドルを備えたカスタム スタイルのプログレス バーに変換できます。

以上がHTML5 範囲入力タイプをプログレスバーのようにカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。