CODEWITHSUNDEEP
htmlcssvalidationtooltip
CloudBranch
CloudBranch

Reputation: 1604

Styling default validation tooltip

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>

Upvotes: 9

Views: 13980

Answers (2)

Dilip Nayak
Dilip Nayak

Reputation: 303

Use this css to style placeholder text

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

Upvotes: 0

Miloš Đakonović
Miloš Đakonović

Reputation: 3871

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.

Reference.

Upvotes: 15

Related Questions