0

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>
Improve this question
1
  • I updated my answer. You can style the title element. Commented Aug 17, 2020 at 3:17

3 Answers 3

Reset to default
0

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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?

Improve this answer

Comments

0

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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.