使用纯CSS对webkit的样式输入范围 [英] Styling input range for webkit with pure CSS

问题描述

我想自订输入类型范围，例如

我试图使用以下代码改变拇指和如下，但选择的范围颜色不改变。

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

任何人都可以建议我更改所选的可运行轨道背景颜色？ p>

解决方案

Ionic框架使用的有趣的方法是使用CSS来设置范围输入轨。他们在 :: - webkit-slider-thumb 中添加一个 :: before 伪元素尽可能宽，然后将其定位在轨道的顶部。 （我无法获得 border-radius 以使用它。）

  input [type ='range'] {width：210px; height：30px; overflow：hidden;游标：指针;}输入[type ='range']，输入[type ='range'] ::  -  webkit-slider-runnable-track，input [type ='range'] ::  -  webkit-slider- -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;背景：steelblue; border-radius：50％; border：2px solid white;} input [type ='range'] ::  -  webkit-slider-thumb :: before {position：absolute; content：''; height：10px; / *等于可运行轨迹的高度* / width：500px; / *使这个比最大范围的输入元素大* / left：-502px; / *这应该是-2px  -  width * / top：8px; / *不要更改此* / background：＃777;}  

 < div class =container> < input type =rangemin =0max =100value =10/>< / div>   
 
 
 
 
 
 
 据我所知，没有纯CSS的方式来做这个Webkit浏览器（和FF）。 IE提供了一种使用 -ms-fill-lower 和 -ms-fill-upper  
 
 
您可以使用线性渐变作为可运行轨迹的背景图像，然后使用JavaScript更改 background-size 以实现所需的效果。由于问题特定于Webkit，因此目前仅在Webkit支持的浏览器中工作。这个方法允许我们在轨道中添加 border-radius 。
 
 
 
这段代码改编自Ana Tudor  CodePen演示。 
 
 
 
 
 
 
  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 '，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;游标：指针;}输入[type ='range']，输入[type ='range'] ::  -  webkit-slider-runnable-track，input [type ='range'] ::  -  webkit-slider- -webkit-appearance：none;} input [type ='range'] ::  -  webkit-slider-runnable-track {width：200px; height：10px;背景：线性梯度（右，＃777，＃777），#AAA; background-size：10％100％;背景重复：无重复; border-radius：5px;} input [type ='range'] ::  -  webkit-slider-thumb {height：30px; width：30px; margin-top：-10px;背景：steelblue; border-radius：50％; border：2px solid white;}  
 
 < div class = container> < input type =rangemin =0max =100value =10/>< / div>   
 
I would like to customize input type range like this. 



I tried to use the following code to change the thumb and as below but selected range color is not changed. 

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%;
}
Could anybody please suggest me to change the selected runnable track background color?
解决方案
Interesting approach being used by the Ionic framework for styling the range input track with just CSS. They are adding a ::before pseudo-element to the ::-webkit-slider-thumb, making it as wide as possible and then positioning it on top of the track. (I couldn't get border-radius to work with it.)



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>







As far as I am aware there is no pure CSS way to do this for Webkit powered browsers (and FF). IE provides a way to style the two portions of the track using -ms-fill-lower and -ms-fill-upper but there are no equivalents in WebKit and hence JavaScript will be needed.

You could use a linear-gradient as background image for the runnable track and then change the background-size using JavaScript to achieve the required effect. As question is specific to Webkit, the snippet provided currently works only in Webkit powered browsers. This method does allow us to add a border-radius to the track.

This snippet was adapted from Ana Tudor's CodePen Demo. That demo has ways to make it work in other browsers also.



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>





                        
这篇关于使用纯CSS对webkit的样式输入范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！