Styling default validation tooltip

Question

Is it possible to style the default tooltip? Here's a JSFiddle demonstrating the default tooltip.

<form>
    <input type="text" placeholder="Submit without entering value" required>
    <input type="submit">
</form>

The tooltip that displays when a required field is not filled out. — CloudBranch, Aug 13 '16 at 07:19
That's not what i'm looking for. I want to know if the default tooltip can be styled. — CloudBranch, Aug 13 '16 at 07:23
http://stackoverflow.com/questions/5478800/override-css-for-html5-form-validation-required-popup — Madalina Taina, Aug 13 '16 at 07:29

score 13 · Accepted Answer · answered Aug 13 '16 at 07:24

You can not change "default tooltip" (HTML5 validation bubble) - it is determinated by browser vendor and several other params like browser language.

You can, however, prevent validation bubble - by doing something like

<input placeholder="Lorem ipsum..." required oninvalid="myCustomFunction()" />

From now on, with myCustomFunction you can develop your own bubble.

score 1 · Answer 2 · answered Aug 13 '16 at 07:32

1

this article nicely sums up the possibilities

answered Aug 13 '16 at 07:32

Honza

score 0 · Answer 3 · answered Aug 13 '16 at 07:29

0

Use this css to style placeholder text

::-webkit-input-placeholder { /* Chrome */
  color: red;
}

answered Aug 13 '16 at 07:29

Dilip Nayak

3 Answers3