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

Question

I have to bring red borders around the input element in chrome on HTML5 validation like as that of Firefox.

I have search it a lot but unable to find precise answer. Any help of how to do it using css is greatly appreciated.

Thank you.

Solution 1

You use the :valid pseudo class.

To shamelessly copy the code from 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 a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

Solution 2

Try adding 'required' in the DOM element

<input name="heading" type="text" class="form-control" placeholder="heading" maxlength="35" required />