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

seletor:read-only {
	
}

Exemplo

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

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

input: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