Is it possible to create a title for the "select" tag without it being part of the options?

Asked

Viewed 2,862 times

2

I have a question about the "select" tag, if it is possible that it has a visible title without being part of the options?

html html-select

2 answers

3


You can define a select, having a first option marked as disabled and selected at the same time.

Behold:

Simplest way

<select>
  <option disabled selected>Cars</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>

Removing when selecting with Javascript

When you select the input, you can remove it too using the event onmounsedown.

Behold:

 <select onmousedown="document.querySelector('#fake').remove()">
   <option disabled selected id="fake">Cars</option>
   <option>Volvo</option>
   <option>Mercedes Bens</option>
</select>

Note that, in this last example, I added an id to option to make it easier to find it via querySelector.

Removing the first item with CSS

You can also set as in the first example, but adding a display:none in the first option.

<select>
  <option disabled selected style="display: none">Cars</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>

Locking Submit if you have not selected a desired option

In this last example, I recommend using a required in his select. There, the others option would have to have some value in value, leaving only the first with nothing in value.

Behold:

<form>
<select required>
  <option disabled selected style="display: none;" value="">Cars</option>
  <option value="volvo">Volvo</option>
  <option value="mercedes">Mercedes Bens</option>
</select>
  <button type="submit">Submit</button>
 </form>

Observing: If you want to set a CSS for the first option to differentiate from others, it is possible. However in the tests I did only worked when you click on select (and I don’t know if it works in other browsers).

Tested in Google Chrome:

<select required>
        <option selected style="color: #555; background-color: #ddd">Cars</option>
        <option value="volvo">Volvo</option>
        <option value="mercedes">Mercedes Bens</option>
    </select>

  • I think this is as close as I wish, cool if I could put it on Hidden on the list?

  • This 3rd is Peter, vlw...

  • @Magichat looks at the 4th example. This is for the form not to leave the Submit, if the guy has not selected a valid item. No Javascript

  • Mass, required...show.. Only bad pq, not very comprehensive in terms of browsers.. At this point as the form will have anyway a kind of validation, then I will appeal pro js, for this purpose

  • Your second code keeps giving me a mistake: "Uncaught Typeerror: Cannot read Property 'remove' of null" - The error does not occur the first time you make the selection, but occurs from the second on.

  • @Victorstafusa I think this is because the element has been removed. Maybe it’s really better to use the "other options"

Show 1 more comment

0

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Source: W3schools

  • Friend thanks for the attention, but in this way the "select" starts with a "Volvo" option, I would like it to be visible for example "Cars" and in the brand options, but that "Cars" was not an option.

  • The @Nilsonueahara answer is correct, the optgroup represents only a text not selectable within a select.

  • @joaopaulosantosalmeida but I believe that is not what was asked in the question.

Browser other questions tagged html html-select

You are not signed in. Login or sign up in order to post.