使用CSS根据输入值长度选择元素

我有一个输入字段

<input readonly="readonly" step="1" value="0" type="number">

这些都很好，但是要匹配，str必须精确。有没有办法用带有正则表达式的CSS选择元素？比如：

// select input with single-digit value
input[value=\d] { ... }

// select input with double-digit value
input[value=\d\d] { ... }

// select input with triple-digit value
input[value=\d\d\d] { ... }

---

如果没有，我将只使用类和JavaScript

我不认为您可以使用纯CSS来检查长度并相应地更改字体，您提到如果是这种情况，您可以使用JavaScript。您可以在

onchange

事件上检查长度或输入值，并相应地设置字体大小

document.getElementById（'txt'）。值=0
函数校验（x）{
如果（x.value.length>=3）{
x、 style.fontSize='20px'
}如果（x.value.length>=2），则为else{
x、 style.fontSize='14px'
}
}
函数plusOne（）{
var-box=document.getElementById（'txt'）
box.value++
方格（方格）
}

---

只是用户体验方面的一个注意事项，用户不知道默认字体大小是多少，输入数字也没什么意义。拥有字体大小调整器是一种更好的体验，用户可以按下按钮来增加/减少字体。您可以设置最大/最小大小。或者只是有3个大小，例如，用户可以单击按钮将大小更改为3个中的1个。您可以使用JavaScript吗？@Scath是的，但我想知道是否有CSS解决方案CSS不能基于内容进行样式设置…它只能基于元素及其相对于其他元素的位置进行样式设置。属性选择器仅适用于元素的初始属性值。当值更改时，不会重新计算它。

// select input with single-digit value
input[value=\d] { ... }

// select input with double-digit value
input[value=\d\d] { ... }

// select input with triple-digit value
input[value=\d\d\d] { ... }