Comentario: Un CSS único único de WebKit puede controlar el estilo de texto. Con los efectos de animación y la pseudocategoría de CSS3, podemos crear fácilmente un cuadro de entrada de animación, que es muy adecuado para el inicio de sesión del sistema, la búsqueda, etc. Si está interesado, puede consultar el siguiente artículo o ayudarlo.
No he escrito un artículo técnico durante mucho tiempo. He estado usando WebKit como operador recientemente. Por supuesto, necesito usar HTML5 y CSS3 en grandes cantidades, lo que no solo reduce muchos JS, sino que también garantiza más suaves.Cuando se selecciona el cuadro de diálogo, el texto de inmediato se volverá más ligero y desaparecerá después de la entrada. La práctica actual es agregar una etiqueta detrás de la etiqueta de entrada. Use el control JS.
Después de que aparece HTML5, tenemos un mejor enfoque.
<input type = "text" placeHolder = "Nombre de usuario o dirección de correo electrónico"/>
Vemos que hay una etiqueta de marcador de posición que se puede utilizar como mensaje de texto de un usuario. Esto es muy conveniente. Pero para lograr la mejor perfección, necesitamos aligerar el texto después de seleccionarlo o modificar el estilo del archivo de inmediato. ¿Qué debemos hacer?
Entrada ::-WebKit-Input-PlaceHolder {
Color: #999;
-Webkit-transición: color.5s;
}
Entrada: Focus ::-WebKit-Input-Placeholder, Entrada: Hover ::-WebKit-InputPlaceholder {
Color: #C2C2C2;
-Webkit-transición: color.5s;
}
-WebKit-Input-placeholder, un CSS único único de WebKit, puede controlar el estilo de texto en el interior. Con los efectos de animación y las pseudo-clases de CSS3, podemos crear fácilmente un cuadro de entrada de animación, que es muy adecuado para el inicio de sesión del sistema, la búsqueda y otras ubicaciones. Por supuesto, este método no funcionará para ser compatible con IE6. Sin embargo, IE9 también admite la etiqueta de marcador de posición, pero su color no puede modificarse.
Entonces, ¿qué debo hacer si no es compatible? Simplemente puede usar jQuery para ayudar, por lo que no está dentro del alcance de este artículo.
Dé una demostración, y la dirección de demostración debe estar en el navegador WebKit para ver el efecto completo. ¿No es muy conveniente?