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

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.

score -1 · Answer 2 · answered Apr 19 '21 at 14:23

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.

let name = document.forms.form01.name;
let message = document.getElementById('message');

name.addEventListener("invalid", function(e){
  e.preventDefault();
  message.style.display = "block";
});

<form name="form01">
  <label for="name">Name</label>
  <input name="name" placeholder="Enter Your Name" type="text" required autocomplete="off">
  <div id="message" style="display:none">Not valid</div>
</form>

This is not what I asked please read the question properly – 13garth Apr 20 '21 at 08:12 — 13garth, Apr 20 '21 at 08:12

HTML Default validation messages styling

2 Answers2