css - 样式化输入[type="range"]
问题描述
你认为有可能实现像图片这样的设计吗?
我试过了,但我真的做不到。
我不知道如何更改选项以更接近图片中的设计。我真的很沮丧,因为我认为这很容易做到。
如果你能给我建议来实现它,我会感谢你的。
[type='range'] {
margin: 0;
padding: 0;
width: 100%;
height: 3em;
background: repeating-linear-gradient(90deg, #ccc 0, #ccc 2px, transparent 0, transparent 1.25em) calc(.5*(1.5em - 2px)) 1.875em/calc(12.5em + 2px) 0.75em no-repeat;
font: inherit;
}
[type='range'],
[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
}
[type='range']::-webkit-slider-runnable-track {
box-sizing: border-box;
border: none;
width: 14em;
height: 0.25em;
background: #ccc;
background-image: linear-gradient(to bottom, #c0c0c0, #afafaf, #9e9e9e, #8e8e8e, #7e7e7e);
border-radius: .25em;
}
[type='range']::-moz-range-track {
box-sizing: border-box;
border: none;
width: 14em;
height: 0.25em;
background: #ccc;
}
[type='range']::-ms-track {
box-sizing: border-box;
border: none;
width: 14em;
height: 0.25em;
background: #ccc;
}
[type='range']::-webkit-slider-thumb {
margin-top: -0.625em;
box-sizing: border-box;
border: 1px solid #7e7e7e;
width: 0.5em;
height: 1.5em;
border-radius: 50%;
background: #ccc;
}
[type='range']::-moz-range-thumb {
box-sizing: border-box;
border: 1px solid #7e7e7e;
width: 0.5em;
height: 1.5em;
border-radius: 50%;
background: #ccc;
}
[type='range']::-ms-thumb {
margin-top: 0;
box-sizing: border-box;
border: 1px solid #7e7e7e;
width: 0.5em;
height: 1.5em;
border-radius: 50%;
background: #656766;
}
[type='range']::-ms-tooltip {
display: none;
}
[type='range']:focus {
outline: none;
}
[type='range']:focus::-webkit-slider-thumb {
background: #656766;
}
[type='range']:focus::-moz-range-thumb {
background: #656766;
}
[type='range']:focus::-ms-thumb {
background: #656766;
}
[type='range']:focus~label span {
color: #95a;
}
[type='range']~label {
color: #333;
}
[type='range']~label span {
color: #ccc;
}
[type='range']~label:after {
margin: -4px;
content: ':';
}
<input type="range">
解决方案
推荐阅读
- exchange-server - Exchange Online 邮件速率发送限制问题
- python - 比较列表python中的字典键值
- sql - SQL Server 避免重复相同的连接
- javascript - Discord.js中文字符显示为框?
- elasticsearch - StormCrawler 站点地图 url 被注入到 Elastic 中,并处于错误状态。我们在种子.txt 中有一个 sitemap.xml 链接
- powershell - 将信息数组传递给powershell中的单独脚本
- javascript - 函数中的多个 if 语句
- unicode - 使用 read.table 读取压缩文本文件时出现问题,奇怪的符号“þ”
- python - 带有注释的python中的多行sql查询
- c++ - 将复数保存在变量中