Como alterar a cor do espaço reservado de entrada usando CSS

Um espaço reservado para entrada especifica a entrada esperada do usuário, dando dicas ou descrições. A maioria das dicas e descrições desaparece quando especificam algo no campo de entrada. Por padrão, a cor do espaço reservado de entrada é cinza; No entanto, em algumas condições, é importante modificar a cor do espaço reservado para aumentar sua visibilidade.

Neste manual, explicaremos diferentes métodos para alterar a cor do espaço reservado de entrada usando o CSS.

Método 1: Altere a cor do espaço reservado de entrada usando o seletor “:: espaço reservado”

CSS “:: espaço reservado”Seletor é usado para selecionar os elementos do formulário com o texto de espaço reservado. Pode ser utilizado para alterar o texto de espaço reservado. Além disso, você pode usar este seletor para modificar a cor do espaço reservado de entrada.

Sintaxe

A sintaxe do espaço reservado :: é o seguinte:

:: espaço reservado
Cor: valor

No lugar de "valor”, Você pode definir a cor do espaço reservado de entrada de acordo com a nossa escolha.

Vamos mudar para o exemplo prático, onde mudaremos a cor do espaço reservado de entrada.

Exemplo

Para alterar a cor do espaço reservado de entrada, em primeiro lugar, criaremos um elemento de entrada usando a tag e definiremos o tipo de entrada como “texto”. Em seguida, defina o texto do espaço reservado como “Digitar seu nome”.

Html

A saída do código fornecido é:

A cor padrão do espaço reservado de entrada é mostrado na imagem acima do ritmo.

Agora, nos mudamos para o CSS e usamos “:: espaço reservado”Para acessar o texto do espaço reservado de entrada e definir sua cor como“RGB (17, 0, 255)”.

CSS

:: espaço reservado
Cor: RGB (17, 0, 255);

Como você pode ver, a cor do espaço reservado de entrada adicionado é alterado para azul:

Há outro método para alterar a cor do espaço reservado por entrada. Vamos conferir.

Método 2: Alterar a cor do espaço reservado de entrada usando “::-webkit-input-placeholder” Pseudo-classe elemento

““::-WebKit-Input-Place Holdder”” O elemento pseudo-classe representa principalmente o texto do espaço reservado de um elemento de formulário. Pode ser utilizado por designers e desenvolvedores temáticos para personalizar a aparência do texto de espaço reservado. Além disso, usando o usuário do elemento especificado, pode modificar a cor de um espaço reservado para entrada.

Sintaxe

Sintaxe do ::-webkit-input-placeholder é dado como:

::-webkit-input-placeholder
Cor: valor

No lugar de "valor”, Você pode definir a cor do espaço reservado de entrada.

Vamos para o exemplo para entender o elemento pseudo-classe discutido acima discutido.

Exemplo

No arquivo CSS, use o “::-Webkit-input-placeholder”Pseudo-elemento da classe e atribui o valor da cor como“RGB (255, 13, 13)”:

::::-webkit-input-placeholder
Cor: RGB (255, 13, 13);

Saída

Aqui, você pode ver que a cor padrão do espaço reservado para entrada é alterado.

Conclusão

A cor do espaço reservado de entrada é alterado usando o “:: espaço reservado"Seletor e"::-WebKit-Input-Place Holdder”Elemento de pseudo-classe. Usando isso, você pode alterar a cor padrão do espaço reservado de entrada. Neste artigo, explicamos o procedimento relacionado à alteração da cor do espaço reservado de entrada usando as propriedades do CSS.