css - How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation? -


i have bring red borders around input element in chrome on html5 validation of firefox.

firefox validation

i have search lot unable find precise answer. of how using css appreciated.

thank you.

you use :valid pseudo class.

to shamelessly copy code https://developer.mozilla.org/en-us/docs/web/css/:valid:

input:invalid {    background-color: #ffdddd;  }  form:invalid {    border: 5px solid #ffdddd;  }  input:valid {    background-color: #ddffdd;  }  form:valid {    border: 5px solid #ddffdd;  }  input:required {    border-color: #800000;    border-width: 3px;  }
<form>    <label>enter url:</label>    <input type="url" />    <br />    <br />    <label>enter email address:</label>    <input type="email" required/>  </form>


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -