CODEWITHSUNDEEP
css
AlieN
AlieN

Reputation: 543

Change style of button element if text field is empty

I would like to change style of #postBtn, if #textfield is empty, something like

#postBtn:[#textfield.value.length==0]{
         border-color:gray;
         background-color:gray;
}

In html:

<input id='textfield'>
<input type="button"  Value="Post" onClick="post()" id="postBtn">

How do I achieve this without javascript? Thanks!

Upvotes: 2

Views: 2278

Answers (1)

Dryden Long
Dryden Long

Reputation: 10180

Ok, you can add required to your input field like so:

<input id='textfield' required>
<input type="button"  Value="Post" onClick="post()" id="postBtn">

And then, using :invalid and the adjacent sibling selector (+), you can style the button if the field is empty like so:

#textfield:invalid + #postBtn {
    background-color: red;
}

Here is a fiddle of it in action: http://jsfiddle.net/w7377/

Note: If the text input field is not actually a required field, then this solution is not the way to go. You may have to use a Javascript solution if that's the case.

Upvotes: 4

Related Questions