如何解决CSS中input:required:invalid规则对小数输入不生效的问题

type为number的输入框默认step属性值为1，仅会将整数判定为有效数值，你输入的小数不符合默认步长规则，所以一直命中:invalid伪类样式，红框不会消失。

给id为enterThing的数字输入框添加step属性即可，根据你的需求二选一：

• 如果要和下方滑块的步长保持一致，仅允许1位小数，设置step=".1"
• 如果允许任意精度的有效小数，设置step="any"

修改后的HTML代码如下：

<input id = "enterThing"
  type        = "number"
  class       = "form-control formBlock"
  min         = "0"
  max         = "10.5"
  step        = ".1"
  required
>
<input id = "sliderThing"
  class   = "slider"
  type    = "range"
  step    = ".1"
  value   = "0"
  min     = "0"
  max     = "10.5"
  oninput = "enterThing.value = sliderThing.value"
>

修改后输入0~10.5范围内的整数、小数都会被判定为有效，红框自动消失，空值时仍会触发必填校验显示红框，完全符合需求。

内容的提问来源于stack exchange，提问作者Jim O.