CSS HTML

Como aplicar readonly em um select?

11 de maio de 2020

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.

readonly no select capa

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:

select com readonly ex 2

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:

select com readonly ex 3

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x