How to change title attribute css in ?

Question

So, this default title attribute look isn't the best. Since html element already has "pattern," there's no reason to write another script to validate the pattern. The only thing that needs to be changed is the look of the pattern error notice. What's a way to achieve this with css? Or, do one must run a js script to display the notice (that looks better than default)?

Example from W3School https://www.w3schools.com/tags/att_input_pattern.asp

<form action="/action_page.php">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Eight or more characters">
  <input type="submit">
</form>

I updated my answer. You can style the title element. – ihodonald Aug 17 '20 at 03:17 — ihodonald, Aug 17 '20 at 03:17

score 0 · Accepted Answer · answered Aug 17 '20 at 03:16

You're thinking of a tooltip. The title property only displays that default browser-based tooltip and you can't style it.

Try a package like jQuery UI.

https://jqueryui.com/tooltip/

Edit: You can style the title element

Styling HTML Title attribute using CSS

score 0 · Answer 2 · answered Aug 17 '20 at 03:54

0

You can't style an actual title attribute, but it was possible to use similar techniques in CSS.

Follow the tip on: How to change the style of the title attribute inside an anchor tag?

answered Aug 17 '20 at 03:54

Claudio

96
1
4

score 0 · Answer 3 · answered Aug 17 '20 at 05:35

Please try this

<form action="/action_page.php">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd" pattern=".{8,}"  oninvalid="this.setCustomValidity('Eight or more characters')" onchange="try{setCustomValidity('')}catch(e){}" oninput="setCustomValidity(' ')" >
  <input type="submit">
</form>

How to change title attribute css in ?

3 Answers3

Edit: You can style the title element