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

Question

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

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 属性设置为文本区域。