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.

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>