Neste guia, entenderemos como desabilitar o campo de entrada usando CSS. Então, vamos começar!
Como desabilitar um campo de entrada usando CSS?
No CSS, os eventos são desabilitados usando o “ eventos de ponteiro ' propriedade. Então, primeiro, aprenda sobre a propriedade pointer-events.
O que é a propriedade CSS “pointer-events”?
O ' eventos de ponteiro ” controlam como os elementos HTML respondem ou se comportam ao evento de toque, como eventos de clique ou toque, estados ativos ou de foco e se o cursor está visível ou não.
Sintaxe
A sintaxe dos eventos de ponteiro é dada da seguinte forma:
eventos de ponteiro : auto | Nenhum ;
A propriedade de menção acima assume dois valores, como “ auto ' e ' Nenhum ”:
- auto: Ele é usado para executar eventos padrão.
- Nenhum: É utilizado para desabilitar eventos.
Dirija-se ao exemplo dado.
Exemplo 1: Adicionando um campo de entrada usando CSS
Neste exemplo, primeiro, criaremos uma div e adicionaremos um cabeçalho e um campo de entrada a ela. Em seguida, defina o tipo de entrada como “ texto ” e defina seu valor como “ Digite seu nome ”.
HTML
< div >< Centro >
< h1 > Desabilitar um campo de entrada < / h1 >
< entrada modelo = 'texto' valor = 'Digite seu nome' >
< / Centro >
< / div >
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 {fundo- cor : rgb ( 184 , 146 , 99 ) ;
altura : 150px;
}
A saída do código descrito acima é fornecida abaixo. Aqui, podemos ver que nosso campo de entrada está ativo no momento e está aceitando a entrada do usuário:
Agora, vá para a próxima parte na qual usamos o valor do “ eventos de ponteiro ” propriedade como “ Nenhum ”.
Exemplo 2: desabilitando um campo de entrada usando CSS
Agora vamos usar “ entrada ” para acessar o elemento adicionado no arquivo HTML e definir o valor de pointer-events como “ Nenhum ”:
entrada {eventos de ponteiro : Nenhum ;
}
Depois de implementar a propriedade mencionada acima “ eventos de ponteiro ' com ' Nenhum ” valor, o texto do campo de entrada não será editável, o que indica que nosso campo de entrada está desabilitado:
É isso! Explicamos o método de desabilitar o campo de entrada usando CSS.
Conclusão
Para desabilitar um campo de entrada em um HTML, o “ eventos de ponteiro ” do CSS é usada. Para fazer isso, adicione um campo de entrada e defina o valor de eventos de ponteiro como “ Nenhum ” para desabilitar o campo de entrada. Neste guia, explicamos o método de desabilitar um campo de entrada usando CSS e fornecemos um exemplo.