Question

在此示例中，<range>标记的值会写入<output>标记：

<range>标记的值是否可以写入同一:before代码的CSS <range>值？

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

如有必要，可以使用JavaScript。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

将范围标记的值设置为：在内容之前

2 个答案: