CSS在输入范围上的伪元素之前和之后

问题描述：

我想做一个滑块，显示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);
}

演示

演示2

在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在输入范围上的伪元素之前和之后

相关推荐