Question

我想做一个滑块，边界显示为dinamicaly。

我在互联网上找到了一些我根据我的情况改编的代码。此代码仅使用html和css，它在Chrome上显示得很好但在Firefox上没有显示（我只有IE9，它没有显示任何滑块）：

<!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）。

但是，是否可以针对任何浏览器正确地执行此操作？

Answer 1

您可以使用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

Demo 2 （花哨版的位）

在Firefox和Chrome上测试过，效果很好，现在很明显你需要通过声明一些自定义字体系列和颜色来设置它们的样式，使它们根据你的要求变得有点花哨。

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

1 个答案: