Neste artigo vamos aprender como aplicar readonly em um select, ou seja, deixá-lo impossibilitado de ter suas opções selecionadas.
Fala programador(a), beleza? Bora aprender coisa nova!
O atributo readonly não funciona no select por si só, precisamos fazer mais alguns ajustes para que o comportamento seja o que queremos
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Então vamos construir uma estrutura HTML de exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Como deixar readonly no select</title>
</head>
<body>
<h2>Selecione uma opção</h2>
<form>
<select>
<option>Opção 1</option>
<option>Opção 2</option>
<option>Opção 3</option>
</select>
</form>
</body>
</html>E como aparece na tela:
Certo, agora o input está habilitado, vamos as alterações necessárias para deixar ele como um readonly:
<select tabindex="-1" aria-disabled="true">
Primeiramente no HTML, vamos adicionar tabindex=”-1″, não permitindo os usuários acessarem o campo via tecla tab
Depois aria-disable=”true”, uma forma de informar que este campo está desabilitado para os leitores de tela, pensando em acessibilidade
Agora no CSS:
select {
background: #EEE;
pointer-events: none;
touch-action: none;
}
Aqui incluimos um background cinza, para dar o aspecto de um campo readonly, apenas como efeito visual
Depois removemos os efeitos de click e de touch (celular), com o pointer-events: none e o touch-action: none
Pronto, nosso select readonly está pronto, veja como ficou:
Lembrando que devem existir mais formas de aplicar readonly em um select, porém esta é bem simples e efetiva
E principalmente sem gambiarras, utilizando somente recursos nativos das linguagens HTML e CSS
Conclusão
Neste artigo vimos como deixar um select como um input readonly
Foi necessário alterar um pouco o HTML por questões de acessibilidade e também da possibilidade de acessar com o tab
Depois com CSS tiramos os eventos de click e touch, além de deixarmos o elemento com um fundo cinza claro
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube