Question

我有一些风格：

input::before {
    content: attr(min); 
}

和一些html：

<input type="range">

input元素没有max属性，内容也没有。

如果属性不可用，我可以设置将作为内容的特定值，还是可以获得滑块的最小值？

（仅限CSS）

...谢谢

Answer 1

你可以用一些CSS技巧来做到这一点。首先，您要将::before和::after伪元素设置为初始content: "0";。然后将它们放在同一个地方，背景颜色。这意味着他们会重叠。在此之后，将content的{{1}}设置为::after。如果存在attr(min)属性，则min元素将具有宽度并隐藏::after。

＆＃13;

::before

＆＃13;

input[type="range"] {
  position: relative;
}

input[type="range"]:after,
input[type="range"]:before {
  content: '0';
  display: block;
  position: absolute;
  left: 0;
  top: 20px;
  background: white;
}

input[type="range"]:after {
  content: attr(min);
}

＆＃13;

Answer 2

试试这个CSS：

input::before {
    content: attr(min, integer, 0); 
}

或者：

input::before {
    content: attr(min, number, 0); 
}

将0替换为您想要的数字。

Answer 3

只需将伪元素的content属性设置为默认值“0”，然后使用相关属性覆盖输入的值。

这是一个非常简单的例子：

*{color:#000;font-family:arial,sans serif;}
[type=range]::before,
[type=range]::after{
  content:"0";
}
[type=range][min]::before{
  content:attr(min);
}
[type=range][max]::after{
  content:attr(max);
}

<input type="range">
<input max="5" min="1" type="range">

CSS - 如何将内容设置为attr（）但是当属性不可用时，将其设置为0或其他？

3 个答案: