For option set title=""

HTML-CSS
1

Or change the default text from browser “Please select an item in the list”. I try set to option title=“test” but not overwrite default text?
how set custom?

2

Hi @bestdesign,

Could you share the link to this exercise?

1 Like
3

You can read about custom error messages at this SO post

This is the example code from that post.

    <input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity('Enter User Name Here')"
    oninput="this.setCustomValidity('')"  />
2 Likes
4

Thanks for help! By the way is a very simple thing but an option tag somehow not show title any idea why?

http://jsfiddle.net/3xzp1cLt/

5

Because options element do not have title attributes.
You can put that text inside the first option and leave value empty.
If you add required to select and put everything in a form, the browser will notify the user that they have to select something other than the first option.

<select id="test" required>
  <option value="">why not show this?</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
</select>

<select id="test" required>
  <option selected disabled value="">why not show this?</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
</select>
1 Like
6

Maybe this will help you some. I came across almost by accident today working on someone else’s drop down issue.

It creates a faux placeholder that does not appear in the options list, cannot be selected and disappears once the user has made a selection.

<select id="color" title="If you want a shirt then select a color" required>
  <option class="none"  value="" disabled selected>Select Color</option>
  <option  value="cornflowerblue">Cornflower Blue (JS Puns shirt only)</option>
  <option  value="darkslategrey">Dark Slate Grey (JS Puns shirt only)</option> 
  <option  value="gold">Gold (JS Puns shirt only)</option>       
  <option  value="tomato">Tomato (I &#9829; JS shirt only)</option>
  <option  value="steelblue">Steel Blue (I &#9829; JS shirt only)</option> 
  <option  value="dimgrey">Dim Grey (I &#9829; JS shirt only)</option> 
</select>

<style>
  .none {
    display: none;
  }
</style>

You might want to confirm how this works in browsers other than Chrome though. I have not tested others.

1 Like