Pseudoclasse read-only

A pseudoclasse read-only define o estilo para inputs com o atributo readonly. Esse input é destinado apenas para leitura, ou seja, não é possível inserir ou alterar dados nele, no entanto, é possível selecioná-los e copiá-los.

Sintaxe

cssseletor:read-only {
  
}

Exemplo

Vamos definir bordas cinza claro para um input destinado apenas para leitura:

html<p>
  <label>Digite o texto</label>
  <input type="text">
</p>
<p>
  <label>Texto para ler</label>
  <input type="text" value="texto" readonly>
</p>

cssinput:read-only {
  border: 1px solid #D8DFE8;
}

Результат:

Veja também

a pseudoclasse :read-write,
que define o estilo para inputs que podem ser editados
a pseudoclasse :default,
que define o estilo para elementos padrão
a pseudoclasse :indeterminate,
que define o estilo para interruptores que estão em um estado indeterminado
a pseudoclasse :optional,
que define o estilo para um input que não possui o atributo required
a pseudoclasse :placeholder-shown,
que define o estilo para elementos quando o texto de placeholder é exibido
a pseudoclasse :required,
que define o estilo para um input que possui o atributo required definido
a pseudoclasse :focus-within,
que define o estilo para elementos em foco
a propriedade caret-color,
que define a cor do cursor de texto em um input