Add a title to the SELECT tag (without the "Selected disabled" option) without it appearing in the options?

Question

How do I add a title to select that it appears in the options and disappears when selecting?

I know it looks like a duplicate, but the problem is I haven’t found what I’d like exactly, option selected disabled works but does not fulfill what I want. Using the same example I saw here on stackoverflow with selected disabled :

<select>
  <option disabled selected>- Selecione -</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>

However, what I would like to do is that the title "- Select -" become the property placeholder and when I went to select the field "- Select -" the same did not appear in the options and disappear. So:

Answer 1

I think what you want is this:

<select>
  <option selected hidden >- Selecione -</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>

To do this add "Hidden" in the option of select!

Answer 2

You can also hide this option with some CSS rules if you prefer.

Thinking about user experience (UX) and if the field is not mandatory in case the user changes his mind he must still have the option to uncheck the option he chose, so I believe that in this case the option should be inside the field!

That’s what I’d do:

select option[data-default] {
  color: #999; /* cor simulando que o campo está desabilitado depois que abre o select */
}

<select>
  <option selected data-default>- Selecione -</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>

---

But if you really want to "disappear" like the "label" here you have an option by merging what you did with CSS by simulating a Placerholder. Only that in this option the user cannot go back, once the selected field he does not have the option to uncheck.

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

<select required>
  <option value="" disabled selected>- Selecione -</option>
  <option value="Volvo">Volvo</option>
  <option value="Mercedes">Mercedes Bens</option>
</select>

Nassa gringo Stackoverflow response has more information and variations. https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box

Answer 3

I got the same effect as your image using javascript to change the text of the option that is selected and unbuilt.

I used the css below to hide the disabled options when the select is expanded:

select:focus > option:disabled {display:none;}

Example:

var select = document.getElementById("teste");

select.addEventListener("click", function(){
    var options = this.options
    for(i=0;i<options.length;i++){
      if(options[i].disabled && options[i].selected )
        options[i].text="";
    }
});

select:focus > option:disabled {
  display:none;
}

<select id="teste">
  <option disabled selected>- Selecione -</option>
  <option>Volvo</option>
  <option>Mercedes Bens</option>
</select>