将范围标签的值设置为 :before content答案

【问题标题】：Set value of range tag to :before content将范围标签的值设置为 :before content
【发布时间】：2016-03-10 16:06:02
【问题描述】：

在本例中，<range> 标签的值被写入<output> 标签：

http://jsfiddle.net/2GhQX/

<range>标签的值能否写入同一个<range>标签的CSS:before值？

input[type="range"]:before {
    content: <insert value here>
}

如有必要，可以使用 JavaScript。

【问题讨论】：

input 标签是自闭合标签，它们不能附加伪元素（但我认为过去存在浏览器不一致）。
这适用于 Safari：input[type="range"]:before {content: attr(min);}
但它不应该工作（因此它可能会在您没有意识到的情况下随时报废）。 Reference SO thread.
感谢分享。那么整个问题真的毫无意义，我应该求助于使用 JS Fille 示例。

标签： javascript css

【解决方案1】：

您需要使用 JavaScript 将值写入 input 标记的自定义属性，然后使用 CSS attr() 函数获取该属性的值并填充伪元素的内容。

document.getElementById("range").addEventListener("input",function(){
  this.dataset.value=parseInt(this.value.trim());
},0);

*{color:#000;font-family:arial,sans serif;}
input::before{
  content:attr(data-value);
}

&lt;input data-value="0" id="range" type="range" value="0"&gt;

另一个具有更好未来证明的选项是使用output 元素和类似的 JavaScript，如下所示：

document.getElementById("input").addEventListener("input",function(){
  document.getElementById("output").value=this.value.trim();
},0);

*{color:#000;font-family:arial,sans serif;}
output{float:left;}

<input data-value="0" id="input" type="range" value="0">
<output for="input" id="output">0</output>

【讨论】：

不知道你能做到这一点。你每天学习新的东西。迄今为止最好的解决方案。（即使将来使用伪元素也会过时。）
@forthrin，我为您添加了另一个选项，它不依赖于浏览器对 input 标记上的伪元素的持续支持。

【解决方案2】：

试试这个。要动态应用样式，您可以将具有修改值的新样式标记附加为所需选择器的 css 内容属性值。

$('#rangeInput').on('input', function() {
  $('body').append('<style>input[type="range"]:before{content: "' + this.value + '";}</style>');
});

input[type="range"]:before {
  content: '0'
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <body>
    <form oninput="amount.value=rangeInput.value">
      <input type="range" id="rangeInput" name="rangeInput" min="0" max="100">

      <output name="amount" for="rangeInput">0</output>
    </form>


  </body>
</body>

</html>

【讨论】：

好吧，显然直接写入样式表会起作用:) 但是，直到放开滑块，它才会更新。滑动时是否可以连续更新？（如果可能，不要将纯文本写入样式表。）
尝试编辑后的截图。将change事件更改为input