El cuadro de entrada de entrada es un componente indispensable de las páginas web, pero cada navegador tiene diferentes estilos de visualización de cuadros de entrada.
Por ejemplo:
La imagen de arriba es el cuadro de entrada que viene con Google Chrome e IE Browser, y el estilo no es satisfactorio, por lo que la mayoría de ellos escribirán los estilos ellos mismos.
Aquí hay un simple estilo de cuadro de texto
entrada {border: 1px sólido #ccc; relleno: 7px 0px; Border-Radius: 3px; / *El atributo CSS3, IE, no admite */ Padding-Left: 5px; } Imagen de reproducción:
Significado del atributo de estilo:
borde: 1px sólido #ccc; /*Establezca el borde del cuadro de entrada, el color, el tamaño y las líneas punteadas continuas de la línea de borde*/
relleno: 7px 0px; /* Establezca la altura del cuadro de entrada, también puede usar la altura, pero si usa la altura, el cursor del cuadro de entrada se colocará en la parte superior y se deben configurar otros estilos para solucionarla, y puede no ser compatible.
Border-Radius: 3px; / *La piedra de la propiedad dentro de CSS3, es decir, no es compatible con */
ROLED-LAFUERA: 5px; /*Deje que el anuncio esté a 5 píxeles de la izquierda, y al principio el cursor está unido al borde del cuadro de entrada a la izquierda*/
Básicamente, los estilos anteriores se usan más comúnmente hoy en día, y luego algunas otras configuraciones de entrada
Por ejemplo: marcador de posición de atributo
Esta propiedad tiene un efecto de texto rápido en el cuadro de entrada. La propiedad CSS3 no admite IE
Entrada haga clic para brillar Efecto especial:
entrada {border: 1px sólido #ccc; relleno: 7px 0px; Border-Radius: 3px; ROLED-LAFUERA: 5px; -Webkit-box-shadow: INSET 0 1PX 1PX RGBA (0,0,0, .075); Shadow de caja: recuadro 0 1PX 1PX RGBA (0,0,0, .075); -WebKit-Transition: Border-Color Facle-Out.15s, -webkit-box-shadow faciling-in-out.15s; -O-transición: facilidad de color fronterizo. Transición: Border-Color Facle-En-Out .15s, bandeja de caja facilita en .15s} Entrada: Focus {Border-Color: #66AFE9; Esquema: 0; -Webkit-box-shadow: INSET 0 1PX 1PX RGBA (0,0,0, .075), 0 0 8PX RGBA (102,175,233, .6); Shadow de caja: Recuadro 0 1PX 1PX RGBA (0,0,0, .075), 0 0 8PX RGBA (102,175,233, .6)} Imagen de reproducción: