HTML Inputs: Valid vs Readonly

by vovkss

HTML

<input type="email" value="invalidemail">
<input type="email" value="valid@e.mail">
    
<input type="email" readonly value="invalidemail">
<input type="email" readonly value="valid@e.mail">

CSS

input:invalid {
    background-color: red;
}
input:valid {
    background-color: green;
}