Cómo cambiar el color del marcador de posición de entrada usando CSS

Un marcador de posición de entrada especifica la entrada esperada del usuario al dar sugerencias o descripciones. La mayoría de las sugerencias y descripciones desaparecen cuando especifican algo en el campo de entrada. Por defecto, el color del marcador de posición de entrada es gris; Sin embargo, en algunas condiciones, es importante modificar el color del marcador de posición de entrada para aumentar su visibilidad.

En este manual, explicaremos diferentes métodos para cambiar el color del marcador de posición de entrada utilizando CSS.

Método 1: Cambiar el color del marcador de posición de entrada usando el selector de ":: marcador de posición"

CSS ":: marcador de posiciónEl selector se utiliza para seleccionar los elementos de formulario con el texto del marcador de posición. Se puede utilizar para cambiar el texto del marcador de posición. Además, puede usar este selector para modificar el color del marcador de posición de entrada.

Sintaxis

La sintaxis del marcador de posición :: es el siguiente:

:: marcador de posición
Color: valor

En lugar de "valor", Puede establecer el color del marcador de posición de entrada de acuerdo con nuestra elección.

Pasemos al ejemplo práctico, donde cambiaremos el color del marcador de posición de entrada.

Ejemplo

Para cambiar el color del marcador de posición de entrada, en primer lugar, crearemos un elemento de entrada usando la etiqueta y estableceremos el tipo de entrada como "texto". A continuación, establezca el texto del marcador de posición de entrada como "Ingresar Su nombre".

Html

La salida del código dado es:

El color predeterminado del marcador de posición de entrada se muestra en la imagen anterior.

Ahora, nos mudamos al CSS y usamos ":: marcador de posición"Para acceder al texto del marcador de posición de entrada y establecer su color como"RGB (17, 0, 255)".

CSS

:: marcador de posición
Color: RGB (17, 0, 255);

Como puede ver, el color del marcador de posición de entrada agregado se cambia a azul:

Hay otro método para cambiar el color del marcador de posición de entrada. Vamos a ver.

Método 2: Cambiar el color del marcador de posición de entrada utilizando el elemento pseudo-clase "::-WebKit-Input-placeholder"

"::-WebKit-Input-Placeholder"El elemento pseudo-clase representa principalmente el texto del marcador de posición de un elemento de formulario. Los diseñadores y desarrolladores de temas pueden utilizarlo para personalizar el aspecto del texto del marcador de posición. Además, al usar el elemento especificado, el usuario puede modificar el color de un marcador de posición de entrada.

Sintaxis

Sintaxis de ::-WebKit-Input-placeholder se da como:

::-WebKit-Input-PlaceHolder
Color: valor

En lugar de "valor", Puede establecer el color del marcador de posición de entrada.

Pasemos al ejemplo para comprender el elemento de pseudo-clase discutido anteriormente.

Ejemplo

En el archivo CSS, use el "::-WebKit-Input-Placeholder"Elemento de pseudo-clase y asigne el valor del color como"RGB (255, 13, 13)":

::::-WebKit-Input-PlaceHolder
Color: RGB (255, 13, 13);

Producción

Aquí, puede ver que se cambia el color predeterminado del marcador de posición de entrada.

Conclusión

El color del marcador de posición de entrada se cambia utilizando el ":: marcador de posición"Selector y"::-WebKit-Input-Placeholder"Elemento de pseudo-clase. Usando esto, puede cambiar el color predeterminado del marcador de posición de entrada. En este artículo, hemos explicado el procedimiento relacionado con el cambio del color del marcador de posición de entrada utilizando las propiedades de CSS.