Como colocar placeholder em um select HTML

O elemento <select> não aceita o atributo placeholder como o <input> aceita. Isso é uma limitação conhecida do HTML que confunde quem está aprendendo, porque parece um comportamento que deveria existir nativamente.

A solução padrão e mais amplamente suportada é adicionar uma <option> especial como primeiro item da lista, com três atributos trabalhando juntos. Omitir qualquer um dos três gera um comportamento diferente do esperado.

A solução completa: disabled, selected e hidden juntos

<select required>
  <option value="" disabled selected hidden>Selecione uma opção</option>
  <option value="sp">São Paulo</option>
  <option value="rj">Rio de Janeiro</option>
  <option value="mg">Minas Gerais</option>
</select>

Cada atributo faz uma coisa específica:

Por que os três atributos são necessários:

Só disabled selected: o placeholder aparece no dropdown e o usuário pode tentar selecioná-lo (a seleção é bloqueada, mas a opção aparece na lista, o que é confuso).

Só disabled selected hidden: sem o required no select, o formulário pode ser enviado sem o usuário fazer uma seleção.

Os três juntos com required no select: o placeholder aparece como valor inicial, some da lista suspensa e o formulário não envia enquanto o usuário não escolher uma opção real.

Como estilizar o placeholder com CSS

Por padrão, a option desabilitada tem a mesma cor do texto das outras opções. Para dar o visual típico de placeholder (texto cinza):

select option:first-child {
  color: #999;
}

/* Alternativa: selecionar pelo atributo disabled */
select option:disabled {
  color: #999;
}

Atenção a uma limitação real: a propriedade color em elementos <option> tem comportamento inconsistente entre sistemas operacionais. No macOS, o estilo pode ser ignorado porque o sistema usa o seletor nativo do OS. No Windows e Linux, o CSS funciona normalmente. Em mobile (iOS e Android), o seletor é sempre nativo e ignora qualquer estilo CSS nas opções.

Para estilizar o próprio <select> enquanto o placeholder está ativo (texto cinza no campo antes da seleção):

select:required:invalid {
  color: #999;
}

select option[value=""] {
  color: black; /* restaura a cor ao abrir a lista */
}

Essa técnica usa :invalid que é ativado quando o valor vazio não passa na validação required. Assim o select fica cinza enquanto nenhuma opção foi escolhida, e preto quando o usuário seleciona um valor real.

Para referência completa sobre o elemento select e seus atributos, a documentação MDN sobre select é a fonte mais confiável e mantida em português.

Quando o JavaScript é necessário

Para a maioria dos casos, a solução HTML+CSS acima é suficiente. JavaScript faz sentido quando:

• Você precisa adicionar o placeholder dinamicamente (via AJAX ou frameworks como React/Vue)
• O select é gerado por um plugin ou CMS e você não tem controle direto do HTML
• Você quer um comportamento diferente dependendo de condições no formulário

Exemplo com JavaScript puro para adicionar a classe de placeholder visualmente:

const select = document.querySelector('select');

select.addEventListener('change', function() {
  if (this.value === '') {
    this.classList.add('placeholder-ativo');
  } else {
    this.classList.remove('placeholder-ativo');
  }
});

select.placeholder-ativo {
  color: #999;
}

Solução com CSS puro quando você não pode editar o HTML

Se o <select> é gerado automaticamente por um CMS ou plugin e você não tem acesso ao HTML para adicionar a opção desabilitada, uma alternativa usando CSS puro:

select:has(option[value=""]:checked) {
  color: #999;
}

O seletor :has() está disponível em todos os navegadores modernos desde 2023 (Chrome 105+, Safari 15.4+, Firefox 121+). Verifica na tabela de suporte do Can I Use se os navegadores da sua audiência são compatíveis antes de usar.

Compatibilidade entre navegadores

O comportamento de disabled selected hidden é consistente nos navegadores modernos, mas há particularidades:

Para sites com audiência mista (desktop e mobile), teste sempre em dispositivos reais antes de assumir que o estilo está funcionando.

Se você está construindo formulários no WordPress com Elementor ou um tema customizado, o CSS personalizado pode ser adicionado via como adicionar CSS no Elementor ou diretamente no tema. Para aprofundar em técnicas CSS para estilizar elementos de formulário, veja como remover os estilos padrão de um botão em CSS.

Perguntas frequentes

Por que o placeholder não funciona no select como no input?

Por limitação da especificação HTML. O atributo placeholder foi definido apenas para elementos de texto (<input type="text">, <textarea>, etc.). O <select> usa um modelo diferente de renderização (dropdown nativo do OS) que não suporta placeholder. A alternativa padrão é a <option disabled selected hidden>.

Posso usar só disabled selected sem o hidden?

Sim, funciona. A diferença é que sem hidden a opção de placeholder aparece na lista suspensa quando o usuário clica. Com hidden, a opção some da lista e fica visível apenas como valor inicial no campo fechado. A versão com hidden é mais limpa para o usuário.

O atributo required é obrigatório para essa técnica?

Não é obrigatório tecnicamente, mas sem ele o formulário pode ser enviado com o valor vazio (value=""). Se o campo for obrigatório no seu formulário, adicione required no <select>. Isso também ativa o seletor CSS :required:invalid para estilizar o campo enquanto nenhuma opção foi escolhida.

O CSS funciona para mudar a cor do placeholder do select no mobile?

Em iOS e Android, o <select> usa o seletor nativo do sistema operacional que ignora CSS nas opções. A aparência em mobile é controlada pelo sistema, não pelo CSS. Para personalização total de estilo em mobile, a alternativa é substituir o select nativo por um componente personalizado em JavaScript.

Select2 ou Select Slim são necessários?

Não para casos simples. O Select2 e bibliotecas similares adicionam funcionalidades extras (busca dentro do dropdown, seleção múltipla com tags, etc.) mas têm um custo de performance e dependência. Para a maioria dos formulários, a solução HTML nativa funciona sem biblioteca adicional.