CSS在输入范围上的伪元素之前和之后 [英] CSS before and after pseudo element on input range
问题描述
我想做一个滑块，显示dinamicaly的边界。
I want to do a slider with boundaries showed dinamicaly.
我在互联网上找到了一些我适应我的情况的代码。这个代码只使用html和css，它是很好地显示在Chrome，但不是在Firefox（我只有IE9，没有显示任何滑块）：
I found some code on internet which I adapted on my case. This code is using only html and css and it is well displayed on Chrome but not on Firefox (I only have IE9 which doesn't show any 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 spec（ SO响应）。
I know this doesn't seem to be on the w3c spec (SO response).
但是是否可以正确地对任何浏览器执行此操作？ p>
But is it possible to do it properly for any browsers ?
推荐答案
您可以使用 span data - 前缀，自HTML5起有效
You can use a span to wrap that up with custom attributes with a data- prefix which are valid as of HTML5
HTML b
$ b
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);
}
在Firefox和Chrome上测试，它的工作原理，现在显然你需要通过声明一些自定义字体家族和颜色，使他们有点花哨，根据你的要求风格。
Tested on Firefox and Chrome and it works perfectly, now obviously you need to style them up by declaring some custom font family and color to make them bit fancy according to your requirements.
这篇关于CSS在输入范围上的伪元素之前和之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
