Start the combobox without any text

2

I have a select (usually called a combobox) and I wanted there to be no text when I run the site

<select>
  <option value="Roupa Desportiva">Roupa Desportiva</option>
  <option value="Futebol">Futebol</option>
  <option value="Basquetebol">Basquetebol</option>
  <option value="Andebol">Andebol</option>
  <option value="Tenis">Tenis</option>
</select>

This is the code I'm using

    
asked by anonymous 18.05.2018 / 15:28

1 answer

7

Just leave the first empty field

Option 1

<select>
  <option selected data-default value=""></option>
  <option value="Roupa Desportiva">Roupa Desportiva</option>
  <option value="Futebol">Futebol</option>
  <option value="Basquetebol">Basquetebol</option>
  <option value="Andebol">Andebol</option>
  <option value="Tenis">Tenis</option>
</select>

Option 2 : Help text for the user.

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 value="Roupa Desportiva">Roupa Desportiva</option>
  <option value="Futebol">Futebol</option>
  <option value="Basquetebol">Basquetebol</option>
  <option value="Andebol">Andebol</option>
  <option value="Tenis">Tenis</option>
</select>
    
18.05.2018 / 15:33