CSS applies style to empty inputs ([value = ''])

Question

I would like to apply a special style to all inputs in my form that are required and empty.

It works when I write in my css

input[required='required'] { bla-bla-bla; } 

but it does not work when I write

 input[value=''] { bla-bla-bla; } 

I know I can do it with jQuery, but I would like to do it in pure css if possible.

Can this be done?

Thanks in advance,
Timothy.

Answer 1

I looked for empty inputs like css and found the following:

Matching an empty input field using CSS

You need to use JavaScript.

To use the CSS style, you will need to enter the attribute: value='' in your HTML, but then the CSS will match regardless of whether the value changes in the middle of the session.

Answer 2

You can use Pseudo-Selecot : invalid for this - it will match the input only when the browser check is not performed for the element. If you install the required element, it will not be valid if it is empty.

And all trendy browsers support this CSS class: Browser Compatibility

 input:invalid { border-color: red; } 

 <input type="text" required>