Why is this this html checked as valid in css?

Question

So I have this form in html5. The text areas are empty from the beginning and has a border as markup, but when something is typed into them the border is suppose to disappear, by using valid in css3. Here is my code.

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;
}

The problem is that the pseudo class valid is "activated" even though it's empty and weirdly enough this doesn't happen to any other element in the form.

I hope someone can help me. In advance thanks :)

Answer 1

Thats because it is considered valid, since it is not marked as required. When a field is not required, empty value is perfectly fine.

Try setting the required attribute to the textarea.