Como aplicar readonly em um select?
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.
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
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
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
