目的：

Question

input {
  background: white;
  color: white;
}
input:in-range {
  background: green;
  color: white;
}
input:out-of-range {
  background: red;
  color: white;
}

<h3> CSS range validation </h3>
Enter your age
<input type="number" min="1" max="100">

目的：

白色超出范围（默认情况下）
绿色适用于范围内
红色表示超出范围

在上面的代码片段中，如何制作

input {
   background: white;
   color: white;
}

无论input或in-range是什么，

仅适用于out-of-range？

Answer 1

似乎:in-range和:out-of-range伪类的工作方式类似于:valid和:invalid伪选择器。应用此选项后，input似乎始终处于两种状态，因此默认选择器永远不会应用。空白值也会被视为在范围内（尽管不应该）。 selectors spec似乎并未提及此案件的处理方式。

理想情况下，我建议为字段添加默认值（例如value="0"），因为它无论如何都是必填字段。但是，如果您认为默认的红色背景会以一种糟糕的方式影响您的用户体验，那么请查看下面的解决方法。

将required属性添加到input（因为它无论如何是强制性的）并将其与:valid和:invalid伪选择器一起使用似乎产生了所需的输出

input:invalid - 申请默认方案或空白值，因为字段是必填项，因此空白值表示无效。
input:in-range:valid - 范围内且有效的任何值都符合此选择器。
input:out-of-range:invalid - 任何超出范围且仅因超出范围而无效的值将与此选择器匹配，因此只有当该值超出范围时才会出现红色。

请注意未来读者：这也不是很正确，因为如果我是用户，我希望必填字段的空白值也无效且背景为红色。因此，这可能不适合您。请相应地验证和使用。

＆＃13;

input:invalid {
  background: white;
  color: white;
}
input:in-range:valid {
  background: green;
  color: white;
}
input:out-of-range:invalid {
  background: red;
  color: white;
}

＆＃13;

<h3> CSS range validation </h3>
Enter your age
<input type="number" min="1" max="100" required>

＆＃13;

Answer 2

CSS无法检查您要查找的条件下文本框是否为空。以下是解决方案的更好方法，但是您的解决方案需要JavaScript。请参阅this thread。

尝试添加一个只在类位于元素上时才应用样式的类。

CSS

$scope.openDatePicker = function($event, item) {
    $event.preventDefault();
    $event.stopPropagation();

    if(item.opened){
        item.opened = !item.opened;
    } else{
        item.opened = true;
    }
};

HTML

input[type="number"] {
    background: white;
    color: black;
}
input[type="number"].validate:in-range {
    background: green;
    color: white;
}
input[type="number"].validate:out-of-range {
    background: red;
    color: white;
}

检查验证时如何使默认样式工作？

目的：

2 个答案: