HTML Default validation messages styling

Question

I know that the default validation message text can be edited like this

Change default HTML input validation message

But I want to know if there is a way to target the default validation message boxes with CSS

I really like the default validation and this is a research question, I have looked with my browser console to try target the validation message box. But the browser doesn't pick it up.

Let's say I wanted to make the background of the validation message blue and not white or maybe I wanted to change the font-size. Is there any was to target these validation message boxes CSS?

Might be this one helps you, same question https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message — Onkar, Apr 19 '21 at 12:07
No. Set internally by browser for consistency across all forms user works with — charlietfl, Apr 19 '21 at 12:14
@Onkar Sorry but that doesn't answer my question. want to know if I can write styles for it — 13garth, Apr 19 '21 at 12:20
@charlietfl do you have any links for me to check out please? — 13garth, Apr 19 '21 at 12:24
I don't no. Am only about 85% certain of that. There are a variety of browser message features though you can't access from your page code though. — charlietfl, Apr 19 '21 at 12:26
@charlietfl -That's cool I understand I just want to read up on it so I can better understand :) - Thank you for you help :) — 13garth, Apr 19 '21 at 12:35
Could this answer your question: https://stackoverflow.com/questions/5328883/how-do-i-style-the-html5-form-validation-error-messages-with-css — chrwahl, Apr 21 '21 at 08:00

chrwahl · Answer 1 · 2023-01-26T14:28:39.903

You cannot style the message, but you can create your own "message" element.

Building on the example that you link to, you can add e.preventDefault() to stop the default action of displaying the validity message, and then make your own element show up.

Update 2023

This is an extended example from the example I did in the first place. Now, there is a "real" message box and when you focus the form again the messages will disappear.

document.forms.form01.addEventListener("invalid", function(e){
  e.preventDefault();
  e.target.classList.add('invalid');
}, true);

document.forms.form01.addEventListener("focus", function(e){
  e.preventDefault();
  [...e.target.form.querySelectorAll('.invalid')]
    .forEach(elm => elm.classList.remove('invalid'));
}, true);

label {
  position: relative;
}

div.feedback {
  border: solid thin red;
  position: absolute;
  left: 10%;
  padding: .2em;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
  display: none;
}

input.invalid~div.feedback {
  display: block;
}

input:invalid {
  border: thin solid red;
}

<form name="form01">
  <label>
    <span>Name</span>
    <input name="name" placeholder="Enter Your Name" type="text" required autocomplete="off">
    <div class="feedback">This needs to be a name</div>
  </label>
  <label>
    <span>Email</span>
    <input name="email" placeholder="Enter Your Email" type="email" required autocomplete="off">
    <div class="feedback">This needs to be an email</div>
  </label>
  <button>Submit</button>
</form>

This is actually an excellent answer. Form submissions won't go through when customValidity is set despite the messages not showing. So native validity still plays a vital role, you're just left with the freedom to implement error messages yourself, e.g. as above. — Audun Olsen, Jan 26 '23 at 01:25
@AudunOlsen thanks, I updated my answer so that it looks more like a message box. Hope that you (and others :-)) like it. — chrwahl, Jan 26 '23 at 14:30

score 0 · Accepted Answer · answered Apr 22 '21 at 09:45

At this point the answer seems to be that you can't style the default validation boxes.

Please if anyone has links or a solution to this please add info.

I haven't been able to find anything on this.

If someone adds a viable solution I will accept your answer.

HTML Default validation messages styling

2 Answers2

Update 2023