CSS Somente leitura

“Como sabemos, o estilo CSS contém alguns seletores usados ​​para aplicar propriedades específicas a grupos de elementos semelhantes. Um desses seletores é um seletor somente leitura que tem sido amplamente conhecido pela aplicação das propriedades do CSS nos elementos que não são graváveis, i.e., não pode ser editável. Em outras palavras, seria usado apenas para os elementos somente leitura pertencentes aos elementos do tipo "entrada" de html. Dentro deste artigo hoje, daremos uma olhada no seletor CSS Readonly no script html com alguns exemplos.”

Exemplo 01

Vamos começar com o primeiro exemplo de uso de atributos somente leitura CSS no código HTML. Iniciamos este primeiro exemplo com o formato padrão de tags html. A partir da etiqueta de abertura do HTML, ele seguiu a abertura da cabeça e do estilo. Dentro da tag de estilo, estivemos estilizando o corpo da nossa página HTML. Por um tempo, vamos dar uma olhada no corpo deste código HTML primeiro. Adicionamos um total de 2 parágrafos no corpo da página da web html. Os parágrafos contêm textos simples dentro deles. Ambas as aberturas de parágrafos são seguidas por seu texto,
tag para adicionar uma quebra de link na página da web e a tag para adicionar alguns elementos de entrada à página da web.

Ambas as tags de entrada contêm o atributo "Value" com o valor "Leia e escreva caixa de texto" e "caixa de texto somente leitura". Além disso, a segunda tag de entrada do segundo parágrafo contém o atributo "somente leitura" dentro dele. Depois disso, ambas as tags de entrada contêm o estilo em linha através da tag de estilo usada dentro delas. Ambas as caixas de texto de entrada terão altura de 30px e largura de 250px. As tags de parágrafo estão fechadas aqui, junto com a etiqueta corporal do código HTML. Dentro da tag de estilo, estivemos estilizando a etiqueta do parágrafo que contém o título somente leitura, eu.e., Segunda caixa de texto. O plano de fundo para a caixa de texto apenas somente leitura foi definido como laranja-vermelho. Isso é sobre o estilo e a tag de cabeça. Este código agora está completo e pronto para ser executado no navegador Chrome através do código do Visual Studio.

Após a execução deste código, recebemos as duas caixas de texto com dois parágrafos na nova guia do nosso navegador. A primeira caixa de texto é a caixa de texto de leitura e gravação, eu.e., você pode escrever sobre ele e ler o que você escreveu. Por outro lado, a caixa de texto vermelha laranja somente leitura só pode ser vista e não é editável.

Exemplo 02

Vamos começar com outro exemplo de HTML para criar elementos somente leitura usando o estilo CSS. Dentro deste código, adicionamos a mesma etiqueta junto com a tag, seguida pela cabeça principal e tags do corpo. A etiqueta corporal deste código simples contém texto simples dentro dele sem o uso de qualquer tag. Após este texto, usamos a tag para criar alguns elementos dinâmicos, como caixa de texto em nossa página da web html. Esta caixa de texto de entrada foi classificada com a classe “DisablePointerevents”. O elemento de entrada foi nomeado "entrada" com o valor "texto somente leitura". O estilo em linha foi usado para definir a altura de 30px e largura de 250px para esta caixa de texto.

O corpo da nossa página HTML agora está completa e vamos olhar para a etiqueta de estilo deste código HTML agora. Temos usado a classe "desabillePointerevents" da tag "de entrada" para estilizá -la. Os eventos do ponteiro da propriedade foram definidos para nenhum. A cor de fundo para a caixa de texto foi definida como hotpink. Isso é sobre o estilo da página da web html. Vamos salvar e executá -lo dentro do código do Visual Studio seguido pelo navegador.

Depois de executar este código, a guia do navegador nos mostra o texto simples seguido pela caixa de texto rosa. Depois de clicar na área de texto da caixa de texto, não podemos escrever nada. Isso ocorre porque usamos os eventos ponteiros definidos corretamente para nenhum na tag de estilo.

Exemplo 03

Vamos dar uma olhada no último, mas não menos os exemplos deste artigo. Neste artigo, estaremos fazendo um elemento gravável enquanto o outro é reado por uso de algumas propriedades. Este script HTML foi iniciado com a tag html seguida pela etiqueta principal que contém uma longa lista de propriedades de estilo dentro de sua etiqueta de estilo. A etiqueta corporal deste script HTML contém a propriedade "Fieldset" aqui, agrupa os elementos semelhantes em um conjunto e os estiliza de acordo. Este elemento Fieldset contém a tag de legenda e a tag div. Estamos usando a propriedade contentável definida como "true" para esta tag, eu.e., Sua legenda seria editável e usou a legenda “Informações de envio de pedido ao cliente”.

A tag Div contém uma nova textária que será identificada pelo ID "C_Address", seguido pelo nome "C_Address", e configuramos para leitura-somente leitura. Esta área de texto contém informações de texto nela que são apenas reado e não podem ser editáveis. A tag textarea junto com o contêiner Div foi concluída aqui. Temos fechado a etiqueta de campos aqui também, eu.e., que está segurando a seção div dentro dela. O corpo da nossa página HTML foi concluído aqui, então estamos fechando o corpo e a tag html.

A etiqueta de estilo da etiqueta principal tem usado muitas propriedades para elementos do corpo. Estamos definindo a largura, as margens e a família de fontes de todo o corpo desta página HTML através do uso da palavra -chave "corpo". O preenchimento e as margens foram definidos para o elemento Fieldset, eu.e., contendo outros elementos dentro de si. O elemento da legenda tem usado a propriedade color para definir a cor de uma legenda para o branco com o fundo preto e algum estofamento também. O elemento de contêiner interno da div é usado para definir suas margens, exibição e propriedade de conteúdo justificado. O elemento textarea nesse contêiner foi estilizado com o uso de exibição, família de fontes, tamanho da fonte, dimensionamento de caixas, preenchimento, largura, seleção de usuário, altura e propriedades de redimensionamento.

A propriedade selecionada para o usuário para a área de texto e redimensionamento foi definida como nenhuma, eu.e., Caixa não editável nem redimensionável. O deslocamento do pau e do foco tem sido usado para a textarea usar fundo branco de cor em pairar e focar. Para as tags somente leitura do textarea, estamos definindo a sombra de caixa para nenhuma e a cor de fundo para o branco com 0 bordas. É isso sobre este código. Vamos executá -lo agora.

A saída está mostrando o Fieldset com a legenda “Informações de envio de pedido ao cliente” junto com um contêiner contendo um texto dentro de sua textarea.

Você pode ver que a legenda do campos é editável, enquanto o texto pode ser copiado e não é editável.

Conclusão

O parágrafo introdutório deste artigo tem tudo a ver com o uso do seletor de CSS readonly em códigos HTML e explica seu uso. Junto com isso, discutimos um total de três exemplos diferentes para simplificar um elemento simples por meio do uso de diferentes propriedades sobre o uso de um seletor de leitura, I.e., Offset readonly, uso de propriedades de eventos ponteir.