首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用CSS自定义HTML5输入范围类型的外观?

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

Stack Overflow用户
提问于 2010-08-24 19:58:45
回答 6查看 100.4K关注 0票数 49

我想在HTML5中自定义range输入类型的外观,使其看起来像一个进度条。我尝试过使用CSS类来应用一些常见的CSS属性,但它们似乎不起作用。

有谁可以指导我如何定制它吗??

EN

回答 6

Stack Overflow用户

发布于 2011-07-13 04:03:42

代码语言:javascript
复制
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;
}
票数 66
EN

Stack Overflow用户

发布于 2010-08-24 20:02:06

如果您正在使用HTML5,为什么不使用progress标记呢?

代码语言:javascript
复制
<progress value="1534602" max="4603807">33%</progress>
票数 23
EN

Stack Overflow用户

发布于 2011-01-25 05:34:27

在Webkit中,可以通过-webkit-slider-thumb伪元素:http://jsfiddle.net/leaverou/BNm8j/

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<input type="range" min="0" max="100" />

尽管其他人关于输入type="range"不是适合工作的元素的看法是正确的。

您应该使用<progress>元素,对于不支持它的浏览器,可以使用polyfill:http://lea.verou.me/polyfills/progress/

票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3556157

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档