我想做一个带有动态显示边界的 slider 。
我在互联网上找到了一些代码，并根据我的案例进行了改编。此代码仅使用 html 和 css，它在 Chrome 上显示良好，但在 Firefox 上显示不佳(我只有 IE9，它不显示任何 slider ):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
input {
position: relative;
}
input::after {
position: absolute;
top: 1em;
right: 0em;
content: attr(max);
}
input::before {
position: absolute;
top: 1em;
content: attr(min);
}
</style>
</head>
<body>
<input type="range" id="test" min="1" max="5">
</body>
</html>
我知道这似乎不在 w3c 规范中(SO response)。
但是是否可以在任何浏览器上正确执行此操作？
最佳答案
您可以使用 span 将其与带有 data- 前缀的自定义属性包装起来，该前缀自 HTML5 起有效
HTML
<span data-range-min="1" data-range-max="5">
<input type="range" id="test" min="1" max="5" />
</span>
CSS
span {
position: relative;
}
span:after {
position: absolute;
top: 1em;
right: 0em;
content: attr(data-range-max);
}
span:before {
position: absolute;
top: 1em;
content: attr(data-range-min);
}
Demo 2 (有点花哨的版本)
在 Firefox 和 Chrome 上测试，它运行完美，现在显然你需要通过声明一些自定义字体系列和颜色来设置它们的样式，使它们根据你的要求有点花哨。
关于输入范围内伪元素前后的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23679060/