为什么这个 html 在 css 中被检查为有效？

Question

所以我在 html5 中有这个表单。文本区域从一开始就是空的，并且有一个边框作为标记，但是当在其中输入内容时，边框应该会消失，通过在 css3 中使用有效。这是我的代码。

HTML5：

    <div>
    <label for="caption">caption</label>
    <textarea type="text" name="caption" id="caption"></textarea>
    </div>

CSS3：

#caption {
    float: right;
    width: 450px;
    height: 50;
    border: 1px solid #D3D3D3;
    resize: none;
    font: 12px "lucida grande", tahoma, verdana, arial, sans-serif;
}

#caption:valid {
    border: none;
}

问题是伪类 valid 被“激活”了，即使它是空的，而且很奇怪，这不会发生在表单中的任何其他元素上。

我希望有人可以帮助我。提前谢谢:)

Answer 1

那是因为它被认为是有效的，因为它没有被标记为必需。当不需要字段时，空值是完全可以的。

尝试将required 属性设置为文本区域。