En este manual, explicaremos diferentes métodos para cambiar el color del marcador de posición de entrada usando CSS.
Método 1: Cambiar el color del marcador de posición de entrada usando el selector '::marcador de posición'
CSS “ :: marcador de posición El selector ” se utiliza para seleccionar los elementos del formulario con el texto de 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 la siguiente:
:: marcador de posición {
color : valor
}
En lugar de ' valor ”, puede establecer el color del marcador de posición de entrada según 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
< cuerpo >< aporte escribe = 'texto' marcador de posición = 'Introduzca su nombre' >
< / cuerpo >
La salida del código dado es:
El color predeterminado del marcador de posición de entrada se muestra en la imagen anterior.
Ahora, pasamos 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 usando el elemento de pseudoclase '::-webkit-input-placeholder'
“ :: – webkit-entrada-marcador de posición El elemento de pseudoclase representa principalmente el texto de marcador de posición de un elemento de formulario. Puede ser utilizado por diseñadores y desarrolladores de temas 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
La sintaxis de ::-webkit-input-placeholder se proporciona como:
:: -webkit-entrada-marcador de posición {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 pseudoclase discutido anteriormente.
Ejemplo
En el archivo CSS, use el ' ::-webkit-entrada-marcador de posición ” elemento de pseudoclase y asigne el valor de color como “ RGB (255, 13, 13) ”:
:::: -webkit-entrada-marcador de posición {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 usando el ' :: marcador de posición ” selector y “ :: – webkit-entrada-marcador de posición ” elemento de pseudoclase. Con 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 de color del marcador de posición de entrada mediante las propiedades CSS.