Menu
I would like to apply a special style to all inputs in my form that are required and empty at that.
It does work when i write in my css
input[required='required'] {
bla-bla-bla;
}
but it doesn't work, when i write
input[value=''] {
bla-bla-bla;
}
I know i can do that using jQuery, but i would like to do that in pure css, if it is possible.
Can that be done?
Thank you in advance,
Timofey.
752
CSS attribute selector is used to targeting an input text fields. The input text fields of type 'text' can be targeting by using input[type=text].
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.
HTML5 validation rules will only help when the form is submitted. If you want to prevent the input from being empty you'll need to use some JS. The following (not "ugly JS hack") will work for all number inputs on a page and insert a value of 0 if the user tries to leave the input empty.
The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty , :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not. p:blank { display: none; }
If you don't have to support older IE versions, you can set the placeholder attribute on your input to something (can be whitespace, but must be something) and use :placeholder-shown to target that input.
<input type="text" class="custom-input" placeholder=" ">
.custom-input:placeholder-shown {
/* Your rules */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
