HTML5 Required Input Styling

HTML5 Required input styling

Yeah as SLaks said there is no CSS selector to do this. I would doubt this will ever be in the scope of CSS because CSS would need to check the contents of an input.

Your best option, still, is probably to call a javascript validation function when clicking a button, rather than actually submitting the form. Then checking the [required] fields for appropriate content and either submitting the form or highlighting the required fields that were not filled in.

JQuery has some nice plugins that take care of this for you
http://docs.jquery.com/Plugins/validation

override css for html5 form validation/required popup

It's impossible to change the validation style with only HTML5/CSS3.

It's part of the browser. The only attribute I figured out to change is the error message by using this example:

 document.getElementById("name").setCustomValidity("Lorum Ipsum");

But, as shown in this example : http://jsfiddle.net/trixta/qTV3g/, you can override the panel style by using jQuery. This is not a plugin, it's a core functionality, uses a DOM lib called Webshims and, of course, some CSS to style the popups.

I found that very useful example in this bug post titled Improve form validation error panel UI.

I think this is the best solution you can find and only way to override the basic (ugly) error panel.

Regards.

Change css style HTML5 form required attribute required message

Chrome does not allow styling form validation bubbles anymore:

See Details

Firefox has no way to style the error bubbles

See Details

Is it possible to add CSS or style a browser default required message?

The this.setCustomValidity() message doesn't appear to support HTML like deprecated <center> tags or a <span> tag with CSS classes or inline style, so as @Peter Nielsen wrote, a bunch of spaces would work.

<form>
<input name="loanOfficerUrl" id="loanOfficerUrl" class="form-control" placeholder="New" type="text"
       required
       oninvalid="this.setCustomValidity('Please Enter a Loan Officer Url! \n                     OR \n Please Select a Loan Officer Url!')"
       oninput="this.setCustomValidity('')" />

<input type="submit">
</form>

Using HTML Required attribute with input.invalid and input.valid

input:invalid:focus {
border-color:red;
}

input:valid:focus {
border-color: green;
}

<input id="name" type="text" pattern="[a-zA-Z]+" required="required" />

Use CSS to automatically add 'required field' asterisk to form inputs

Is that what you had in mind?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {  content:" *";  color: red;}

<label class="required">Name:</label><input type="text">

Styling for input required ... in WebKit

You can use following pseudo classes:

::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}

---

Related Topics