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