web-dev-qa-db-ja.com

純粋なCSSを使用したWebkitの入力範囲のスタイリング

this のように入力タイプの範囲をカスタマイズしたいと思います。

enter image description here

次のコードを使用して親指を変更しようとしましたが、選択した範囲の色は変更されません。

[〜＃〜] html [〜＃〜]：

<input type="range" />

[〜＃〜] css [〜＃〜]：

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: red;
  cursor: pointer;
  border: none;
  margin-top: -8px;
}

input[type=range] {
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  height: 30px;
  width: 100%;
}

選択したランナブルトラックの背景色を変更するように提案してもらえますか？

csshtmlpseudo-elementinput-type-range
9
Ponmalar

IonicフレームワークがCSSだけで範囲入力トラックをスタイリングするために使用している興味深いアプローチ。彼らは、::beforeに::-webkit-slider-thumb疑似要素を追加して次のようにしています。できるだけ広くして、トラックの上に配置します。（border-radiusを使用できませんでした）

input[type='range'] {
  width: 210px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: #AAA;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: steelblue;
  border-radius: 50%;
  border: 2px solid white;
}
input[type='range']::-webkit-slider-thumb::before {
  position: absolute;
  content: '';
  height: 10px; /* equal to height of runnable track */
  width: 500px; /* make this bigger than the widest range input element */
  left: -502px; /* this should be -2px - width */
  top: 8px; /* don't change this */
  background: #777;
}
<div class="container">
  <input type="range" min="0" max="100" value="10" />
</div>

私の知る限り、Webkitを利用したブラウザー（およびFF）でこれを行うための純粋なCSSの方法はありません。。 IEは、-ms-fill-lowerと-ms-fill-upperを使用してトラックの2つの部分のスタイルを設定する方法を提供しますが、WebKitには同等のものがないため、JavaScriptが必要になります。

実行可能なトラックの背景画像としてlinear-gradientを使用し、JavaScriptを使用してbackground-sizeを変更して、必要な効果を得ることができます。質問はWebkitに固有であるため、提供されているスニペットは現在、Webkitを利用したブラウザーでのみ機能します。この方法では、トラックにborder-radiusを追加できます。

このスニペットは、Ana Tudorの CodePen Demo から採用されました。このデモには、他のブラウザでも機能させる方法があります。

window.onload = function() {
  var input = document.querySelector('input[type=range]'),
    style_el = document.createElement('style'),
    styles = [],
    track_sel = ['::-webkit-slider-runnable-track'];
  document.body.appendChild(style_el);

  styles.Push('');

  input.addEventListener('input', function() {
    var min = this.min || 0,
      max = this.max || 100,
      c_style, u, Edge_w, val, str = '';

    this.setAttribute('value', this.value);

    val = this.value + '% 100%';
    str += 'input[type="range"]' + track_sel[0] + '{background-size:' + val + '}';

    styles[0] = str;
    style_el.textContent = styles.join('');
  }, false);
}
input[type='range'] {
  width: 210px;
  height: 50px;
  cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: linear-gradient(to right, #777, #777), #AAA;
  background-size: 10% 100%;
  background-repeat: no-repeat;
  border-radius: 5px;
}
input[type='range']::-webkit-slider-thumb {
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: steelblue;
  border-radius: 50%;
  border: 2px solid white;
}
<div class="container">
  <input type="range" min="0" max="100" value="10" />
</div>
7
Harry