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

Question

I have a custom validation error as seen below but I don't like that the OR is not in the center of the screen. Is it possible to center this at all?

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

Does this answer your question? [HTML5 form required attribute. Set custom validation message?](https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message) — MetropolisCZ, Aug 25 '21 at 17:40
No, there is no way to do that with HTML attribute content. Even using spaces will not be reliable as different browsers will display the message differently. You will need to display this message as full markup (HTML elements) if you want to style it like CSS. — TylerH, Aug 25 '21 at 22:16

score -1 · Accepted Answer · answered Aug 25 '21 at 22:01

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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; OR \n Please Select a Loan Officer Url!')"
       oninput="this.setCustomValidity('')" />

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

Thanks. That's a lot of spaces thou. Guess I'll just scratch that and make a simple one liner instead. — AJ Jones, Aug 26 '21 at 00:01

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

1 Answers1