Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

Firefox Validation

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.

like image 243
geeksal Avatar asked Jun 20 '15 06:06

geeksal


People also ask

How do you make an input field invalid?

If you add a customValidity message to the field, it becomes invalid. When you set the message as an empty string, it becomes valid again (unless it is invalid because of other reasons). field. setCustomValidity("Invalid field."); will make the field invalid.

Which CSS class can be used to style an input that is invalid?

The :invalid selector allows you to select <input> elements that do not contain valid content, as determined by its type attribute. :invalid is defined in the CSS Selectors Level 3 spec as a “validity pseudo-selector”, meaning it is used to style interactive elements based on an evaluation of user input.

What CSS selector would you use to create a style sheet rule for all invalid required form fields created with the input element?

The :invalid selector selects form elements with a value that does not validate according to the element's settings.


2 Answers

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>
like image 178
Mr Lister Avatar answered Oct 11 '22 09:10

Mr Lister


Try adding 'required' in the DOM element

<input name="heading" type="text" class="form-control" placeholder="heading" maxlength="35" required />
like image 2
Sajal Avatar answered Oct 11 '22 10:10

Sajal