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.
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.
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.
The :invalid selector selects form elements with a value that does not validate according to the element's settings.
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>
Try adding 'required' in the DOM element
<input name="heading" type="text" class="form-control" placeholder="heading" maxlength="35" required />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With