Cambiar un color de marcador de posición de entrada HTML5 con CSS
Si desea que su sitio web o página web se destaque entre la multitud, el código HTML por sí solo no será suficiente; tendrá que diseñarlo con propiedades CSS.
En CSS, se pueden usar varias propiedades y selectores para diseñar componentes HTML5 y hacerlos más fáciles de usar. En HTML5, diferentes selectores de CSS cambian el color del texto, la fuente, el tamaño de la fuente, la alineación del texto y muchas otras cosas.
En HTML5, la propiedad placeholder guía a los usuarios a través de la sintaxis correcta mostrando un ejemplo. Antes de que el usuario ingrese un valor, el navegador indica el formato.
Se usa más comúnmente con el elemento de entrada de HTML, que permite a los usuarios enviar información como su nombre, edad, número de teléfono, etc. Este artículo explica cómo modificar el color del marcador de posición de una entrada de HTML5 con CSS.
Cambiar un color de marcador de posición de entrada HTML5 con CSS
En este ejemplo, el selector :: placeholder se usa en Style CSS para cambiar el color del texto del marcador de posición a naranja. Utilizamos la etiqueta <input> para ingresar el texto.
Solo tomará cartas. La propiedad de marcador de posición también se utiliza para comodidad del usuario.
Ejemplo 1:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Color</title>
<style>
::placeholder{/* syntax for Chrome,Firefox,Mozilla browsers*/
color:orange;
}
</style>
</head>
<body>
<p>Please enter your name</p>
<input type="text" placeholder="Text only">
</body>
</html>
En el siguiente ejemplo, comenzamos creando un formulario HTML utilizando el elemento <form>. Con el selector ::placeholder, el color del texto del marcador de posición se modifica para los tres componentes <input> del formulario.
Ejemplo 2:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder2</title>
</head>
<style>
::placeholder{
color: green;
}
</style>
<body>
<h2> Please fill the form</h2>
<form>
<input type="text" placeholder="Enter your name"><br>
<input type="number" placeholder="Enter your age"><br>
<input type="email" placeholder="Enter your email-id">
</form>
</body>
</html>