为什么这个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;
}

问题是伪类有效"激活",即使它是空的,奇怪的是,这不会发生在表单中的任何其他元素.

我希望有一个人可以帮助我.提前谢谢:)

Answer 1

这是因为它被认为是有效的,因为它没有被标记为必需.当不需要字段时,空值完全正常.

尝试将required属性设置为textarea.