blocks|key|1161996|text|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;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1161997|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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></pre>


blocks|key|1161890|text|如果您正在使用HTML5，为什么不使用progress标记呢？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1161891|<progress+value="1534602"+max="4603807">33%25</progress>|code-block|syntax|javascript|1161892|entityMap^0|J|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>If you're using HTML 5, why not use the <code>progress</code> tag?</p>

<pre><code>&lt;progress value="1534602" max="4603807"&gt;33%&lt;/progress&gt;
</code></pre>


blocks|key|1161978|text|在Webkit中，可以通过-webkit-slider-thumb伪元素：http://jsfiddle.net/leaverou/BNm8j/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1161979|​|1161980|input[type=range]+{
++++-webkit-appearance:+none;
++++background-color:+silver;
++++width:+200px;
++++height:20px;
}

input[type="range"]::-webkit-slider-thumb+{
++++-webkit-appearance:+none;
++++background-color:+#666;
++++opacity:+0.5;
++++width:+10px;
++++height:+26px;
}|code-block|syntax|javascript|1161981|<input+type="range"+min="0"+max="100"+/>|1161982|1161983|尽管其他人关于输入type="range"不是适合工作的元素的看法是正确的。|1161984|您应该使用<progress>元素，对于不支持它的浏览器，可以使用polyfill：http://lea.verou.me/polyfills/progress/|1161985|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/leaverou/BNm8j/|1|http://lea.verou.me/polyfills/progress/^0|D|K|11|Z|0|0|0|0|0|0|9|C|0|5|A|16|13|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|T|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]]]

<p>You can in Webkit, through the <code>-webkit-slider-thumb</code> pseudo-element: <a href="http://jsfiddle.net/leaverou/BNm8j/" rel="nofollow noreferrer">http://jsfiddle.net/leaverou/BNm8j/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:20px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 26px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" min="0" max="100" /&gt;</code></pre>
</div>
</div>
</p>

<p>Although the others are right about input <code>type="range"</code> not being the right element for the job.</p>

<p>You should use the <code>&lt;progress&gt;</code> element and for browsers that don't support it, this polyfill: <a href="http://lea.verou.me/polyfills/progress/" rel="nofollow noreferrer">http://lea.verou.me/polyfills/progress/</a></p>


blocks|key|1162019|text|可以使用input[type="range"]::-webkit-slider-thumb和input[type="range"]编辑范围输入的CSS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1162020|这是它的例子，|1162021|http://webstutorial.com/range-input-slider-html5-css3/html-5|1162022|我知道这个问题已经得到了回答，但只是分享一下。|1162023|entityMap|0|LINK|mutability|MUTABLE|url|http://web.archive.org/web/20120407000030/http://webstutorial.com/range-input-slider-html5-css3/html-5^0|4|15|1A|J|0|0|0|1O|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|J|3|K|5|6|7|13|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]]]

<p>You can edit the CSS of the range input, using <code>input[type="range"]::-webkit-slider-thumb</code> and <code>input[type="range"]</code>.</p>

<p>Here is the example of it,</p>

<p><a href="http://web.archive.org/web/20120407000030/http://webstutorial.com/range-input-slider-html5-css3/html-5" rel="nofollow noreferrer">http://webstutorial.com/range-input-slider-html5-css3/html-5</a></p>

<p>I know this is already answered but just sharing it.</p>


blocks|key|1162100|text|这是一个示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1162101|​|1162102|input[type='range']+{
	-webkit-appearance:+none;
	border-radius:+5px;
	box-shadow:+inset+0+0+5px+#333;
	background-color:+#999;
	height:+10px;
	vertical-align:+middle;
}
input[type='range']::-moz-range-track+{
	-moz-appearance:+none;
	border-radius:+5px;
	box-shadow:+inset+0+0+5px+#333;
	background-color:+#999;
	height:+10px;
}
input[type='range']::-webkit-slider-thumb+{
	-webkit-appearance:+none+!important;
	border-radius:+20px;
	background-color:+#FFF;
	box-shadow:inset+0+0+10px+rgba(000,000,000,0.5);
	border:+1px+solid+#999;
	height:+20px;
	width:+20px;
}
input[type='range']::-moz-range-thumb+{
	-moz-appearance:+none;
	border-radius:+20px;
	background-color:+#FFF;
	box-shadow:inset+0+0+10px+rgba(000,000,000,0.5);
	border:+1px+solid+#999;
	height:+20px;
	width:+20px;
}|code-block|syntax|javascript|1162103|<input+type="range">|1162104|1162105|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This is an example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type='range'] {
	-webkit-appearance: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px #333;
	background-color: #999;
	height: 10px;
	vertical-align: middle;
}
input[type='range']::-moz-range-track {
	-moz-appearance: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px #333;
	background-color: #999;
	height: 10px;
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
	border: 1px solid #999;
	height: 20px;
	width: 20px;
}
input[type='range']::-moz-range-thumb {
	-moz-appearance: none;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
	border: 1px solid #999;
	height: 20px;
	width: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|948107|text|请参阅http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|948108|它是一个可以生成跨浏览器代码的工具，可以根据您的需要设置本地和webshims范围输入的样式。|948109|.ws-range,+input[type="range"]+{
++++/*+Range+styles:+width,+height,+border-radius,+background+*/
++++-webkit-appearance:+none;cursor:+pointer;border:+0;outline:+none;padding:+0;margin:+20.5px+0;
}
.ws-range+.ws-range-thumb+{
++++/*+Thumb+styles:+width,+height,+border,+border-radius,+background+*/
}
.ws-range.ws-focus+.ws-range-thumb+{
++++/*+Thumb+focus+styles:+border-color,+background+*/
}
.ws-range.ws-active+.ws-range-thumb+{
++++/*+Thumb+active+styles:+border-color,+background+*/
}
.ws-range+.ws-range-min+{
++++/*+Thumb+progress+styles:+display,+background+*/
++++border-radius:+/*+same+as+range+*/;
++++height:+100%25;
}
input[type="range"]::-moz-range-track+{
++++border:+none;background:+transparent;
}
input[type="range"]::-ms-tooltip+{
++++display:+none;
}
input[type="range"]::-webkit-slider-thumb+{
++++/*+Thumb+styles:+width,+height,+border,+border-radius,+background+*/
++++-webkit-appearance:+none;
}
input[type="range"]::-ms-track+{
++++/*+Range+styles:+width,+height,+border-radius,+background+*/
++++color:+transparent;border:+0;
}
input[type="range"]::-moz-range-thumb+{
++++/*+Thumb+styles:+width,+height,+border,+border-radius,+background+*/
}
input[type="range"]::-ms-thumb+{
++++/*+Thumb+styles:+width,+height,+border,+border-radius,+background+*/
}
input[type="range"]:focus::-webkit-slider-thumb+{
++++/*+Thumb+focus+styles:+border-color,+background+*/
}
input[type="range"]:focus::-moz-range-thumb+{
++++/*+Thumb+focus+styles:+border-color,+background+*/
}
input[type="range"]:focus::-ms-thumb+{
++++/*+Thumb+focus+styles:+border-color,+background+*/
}
input[type="range"]:active::-webkit-slider-thumb+{
++++/*+Thumb+active+styles:+border-color,+background+*/
}
input[type="range"]:active::-moz-range-thumb+{
++++/*+Thumb+active+styles:+border-color,+background+*/
}
input[type="range"]:active::-ms-thumb+{
++++/*+Thumb+active+styles:+border-color,+background+*/
}
input[type="range"]::-moz-range-progress+{
++++/*+Thumb+progress+styles:+display,+background+*/
++++border-radius:+/*+same+as+range+*/;
++++height:+100%25;
}
input[type="range"]::-ms-fill-lower+{
++++/*+Thumb+progress+styles:+display,+background+*/
++++border-radius:+/*+same+as+range+*/;
++++height:+100%25;
}
.no-cssrangeinput+input[type="range"]+{
++++background:+transparent;margin:+0;border:+0;min-height:+51px;
}|code-block|syntax|javascript|948110|entityMap|0|LINK|mutability|MUTABLE|url|http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range^0|3|25|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>See <a href="http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range" rel="nofollow">http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range</a></p>

<p>It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.</p>

<pre><code>.ws-range, input[type="range"] {
    /* Range styles: width, height, border-radius, background */
    -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0;
}
.ws-range .ws-range-thumb {
    /* Thumb styles: width, height, border, border-radius, background */
}
.ws-range.ws-focus .ws-range-thumb {
    /* Thumb focus styles: border-color, background */
}
.ws-range.ws-active .ws-range-thumb {
    /* Thumb active styles: border-color, background */
}
.ws-range .ws-range-min {
    /* Thumb progress styles: display, background */
    border-radius: /* same as range */;
    height: 100%;
}
input[type="range"]::-moz-range-track {
    border: none;background: transparent;
}
input[type="range"]::-ms-tooltip {
    display: none;
}
input[type="range"]::-webkit-slider-thumb {
    /* Thumb styles: width, height, border, border-radius, background */
    -webkit-appearance: none;
}
input[type="range"]::-ms-track {
    /* Range styles: width, height, border-radius, background */
    color: transparent;border: 0;
}
input[type="range"]::-moz-range-thumb {
    /* Thumb styles: width, height, border, border-radius, background */
}
input[type="range"]::-ms-thumb {
    /* Thumb styles: width, height, border, border-radius, background */
}
input[type="range"]:focus::-webkit-slider-thumb {
    /* Thumb focus styles: border-color, background */
}
input[type="range"]:focus::-moz-range-thumb {
    /* Thumb focus styles: border-color, background */
}
input[type="range"]:focus::-ms-thumb {
    /* Thumb focus styles: border-color, background */
}
input[type="range"]:active::-webkit-slider-thumb {
    /* Thumb active styles: border-color, background */
}
input[type="range"]:active::-moz-range-thumb {
    /* Thumb active styles: border-color, background */
}
input[type="range"]:active::-ms-thumb {
    /* Thumb active styles: border-color, background */
}
input[type="range"]::-moz-range-progress {
    /* Thumb progress styles: display, background */
    border-radius: /* same as range */;
    height: 100%;
}
input[type="range"]::-ms-fill-lower {
    /* Thumb progress styles: display, background */
    border-radius: /* same as range */;
    height: 100%;
}
.no-cssrangeinput input[type="range"] {
    background: transparent;margin: 0;border: 0;min-height: 51px;
}
</code></pre>


<p>I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.</p>

<p>Can any one direct me how to customize it??</p>


How to customize the HTML5 input range type looks using CSS?

我想在HTML5中自定义range输入类型的外观，使其看起来像一个进度条。我尝试过使用CSS类来应用一些常见的CSS属性，但它们似乎不起作用。有谁可以指导我如何定制它吗？？

问如何使用CSS自定义HTML5输入范围类型的外观？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS自定义HTML5输入范围类型的外观？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS自定义HTML5输入范围类型的外观？
EN