O campo de entrada é usado para fazer formulários e obter informações do usuário. Os usuários podem preencher o campo de entrada de acordo com o tipo de entrada. Mas, às vezes, você deve desativar o campo de entrada para cumprir qualquer condição prévia, como a seleção de uma caixa de seleção. Nessa situação, você precisa desativar o campo de entrada.

Neste guia, entenderemos como desativar o campo de entrada usando CSS. Então, vamos começar!

Como desativar um campo de entrada usando CSS?

No CSS, os eventos são desativados usando o “Ponteiro-eventos" propriedade. Então, primeiro, aprenda sobre a propriedade Pointer-Events.

O que é a propriedade CSS "Ponte-Events"?

O "Ponteiro-eventos”Controle como os elementos HTML respondem ou se comportam com o evento de toque, como clique ou tocar em eventos, estados ativos ou pairar, e se o cursor é visível ou não.

Sintaxe
A sintaxe dos eventos de ponteiro é dada da seguinte forma:

Ponteiro-eventos: Auto | Nenhum;

A propriedade mencionada acima leva dois valores, como “auto" e "nenhum”:

• auto: É usado para realizar eventos padrão.
• nenhum: É utilizado para desativar os eventos.

Siga em direção ao exemplo dado.

Exemplo 1: Adicionando um campo de entrada usando CSS

Neste exemplo, em primeiro lugar, criaremos uma div e adicionaremos um campo de título e entrada. Em seguida, defina o tipo de entrada como “texto”E defina seu valor como“Digite seu nome”.

Html

Desativar um campo de entrada

Depois disso, vá para o CSS e estilize o div, definindo sua cor de fundo como “RGB (184, 146, 99)"E altura como"150px”.

CSS

div
Background-Color: RGB (184, 146, 99);
Altura: 150px;

A saída do código descrito acima é dado abaixo. Aqui, podemos ver que nosso campo de entrada está atualmente ativo e está aceitando a entrada do usuário:

Agora, mude para a próxima parte em que usamos o valor do “Ponteiro-eventos"Propriedade como"nenhum”.

Exemplo 2: Desativando um campo de entrada usando CSS

Vamos agora usar “entrada”Para acessar o elemento adicionado no arquivo html e defina o valor dos eventos de ponteiro como“nenhum”:

entrada
Ponteiro-eventos: nenhum;

Depois de implementar a propriedade acima mencionada “Ponteiro-eventos" com "nenhum”Valor, o texto do campo de entrada será não editável, o que indica que nosso campo de entrada está desativado:

É isso! Explicamos o método de desativar o campo de entrada usando CSS.

Conclusão

Para desativar um campo de entrada em um html, o “Ponteiro-eventos”A propriedade do CSS é usada. Para fazer isso, adicione um campo de entrada e defina o valor dos eventos do ponteiro como “nenhum”Para desativar o campo de entrada. Neste guia, explicamos o método de desativar um campo de entrada usando CSS e fornecemos um exemplo disso.