Estilo avanzado de casilla de verificación con cuadrícula CSS
los Módulo de diseño de cuadrícula CSS No solo podemos resolver un problema gigantesco de diseño, sino también algunos problemas antiguos que hemos visto. tratar con durante mucho tiempo, como estilo de una etiqueta de casilla de verificación.
Si bien hay un método relativamente sencillo para diseñar la etiqueta cuando aparece después la casilla de verificación, no es tan fácil cuando aparece la etiqueta antes de eso.
Estilo de casilla de verificación sin CSS Grid
Estilo de una etiqueta después una casilla de verificación es algo que los desarrolladores hemos estado haciendo desde que leímos en algún lugar. Esta técnica es uno de los principales y antiguos ejemplos de la poderosa dinámica que puede poseer CSS..
Aquí está el código con el que ya podría estar familiarizado, que diseña una etiqueta después una casilla marcada:
entrada: marcado + etiqueta / * me estilo * /
UNA etiqueta de estilo después una casilla de verificación podría verse así (sin embargo, también puede usar otras reglas de estilo):
El código CSS anterior utiliza el combinador de hermanos adyacentes marcado por el + llave. Cuando una casilla está en el :comprobado estado, un elemento después eso (usualmente una etiqueta) puede ser estilizada usando este método.
¡Una técnica tan simple y efectiva! Qué podría posiblemente ir mal con eso? Nada, hasta que quieras mostrar la etiqueta antes de la casilla de verificación.
El combinador de hermanos adyacente selecciona el siguiente elemento; esto significa que la etiqueta tiene que venir después la casilla de verificación en el código fuente HTML.
Entonces, para hacer aparecer una etiqueta. antes de la casilla de verificación correspondiente en la pantalla, no podemos simplemente moverla antes de la casilla de verificación en el código fuente, como El selector de hermanos anterior no existe en CSS.
Lo que deja solo una opción: reposicionando la casilla de verificación y la etiqueta utilizando transformar o posición o margen u otra propiedad de CSS con algún tipo de poder telequinético, para que la etiqueta aparezca a la izquierda de la casilla de verificación en la pantalla.
Problemas con el método tradicional.
No hay nada mayormente mal con la técnica antes mencionada pero puede ser ineficiente en ciertos casos. Me refiero a los casos en que las posiciones reorganizadas de la casilla de verificación y la etiqueta ya no funcionan.
Pensar responsivo, por ejemplo. Es posible que tenga que cambiar el tamaño o la posición de la casilla de verificación de acuerdo con el dispositivo en el que se muestra. Cuando eso suceda, lo harás Necesito reposicionar la etiqueta también, ya que no se realizará una realineación automática de la etiqueta en respuesta al cambio de tamaño o el cambio de tamaño de la casilla de verificación.
Podemos eliminar esta desventaja si pudiéramos proporcionar un diseño sólido para la casilla de verificación y la etiqueta, En lugar de colocarlos aproximadamente en la página..
Pero, casi todos los sistemas de diseño, como tablas o columnas, requieren que agregue la etiqueta antes de la casilla de verificación en el código fuente Para que aparezca de la misma manera en pantalla. Eso es algo que no queremos hacer porque el siguiente elemento en la etiqueta dejará de funcionar.
CSS Grid, por otro lado, es un sistema de diseño que es no Depende de la ubicación / orden de los elementos en el código fuente..
Las capacidades de reordenación del diseño de cuadrícula afectan intencionalmente solo la representación visual, Saliendo del orden del habla y la navegación en función del orden de origen. Esto permite que los autores manipulen la presentación visual mientras dejan intacto el orden de la fuente ... - Módulo de diseño de cuadrícula CSS Nivel 1, W3C
Por lo tanto, la cuadrícula CSS es una solución ideal para estilo de la etiqueta que aparece antes de la casilla de verificación.
Estilo de casilla de verificación con CSS Grid
Empecemos con el código HTML.. El orden de la casilla de verificación y la etiqueta permanecerán igual que antes. Acabamos de añadir ambos a una cuadrícula..
El CSS que acompaña es el siguiente:
#cbgrid display: grid; cuadrícula-plantillas-áreas: "izquierda derecha"; ancho: 150px; input [type = checkbox] grid-area: right; label grid-area: left;
No voy a profundizar en cómo funciona la cuadrícula CSS, como ya escribí un Artículo detallado sobre el tema., que puedes leer aquí. Algunos conceptos básicos, sin embargo: pantalla: rejilla La propiedad convierte un elemento en un contenedor de rejilla., área de cuadrícula identifica el área de la cuadrícula a la que pertenece un elemento, y cuadrícula-plantillas-áreas forma un diseño de cuadrícula, compuesto por diferentes áreas de cuadrícula.
En el código anterior, hay dos áreas de cuadrícula: "izquierda" y "Correcto". Se maquillan dos columnas de una fila de cuadrícula. La casilla de verificación pertenece a la "Correcto" área y la etiqueta a la "izquierda". Aquí está como se ven en la pantalla:
Como no cambiamos la ubicación relativa de la casilla de verificación y la etiqueta en el código fuente, podemos Todavía utilizo el combinador de hermanos adyacente:
entrada: marcado + etiqueta / * me estilo * /
Tenga en cuenta que un elemento de la cuadrícula es siempre bloqueado; aparece con una caja circundante conocida como cuadro de nivel de cuadrícula. Si no quieres eso, por ejemplo para una etiqueta, poner una envoltura en ese artículo (envolverlo en otro elemento) y convertir esa envoltura en el área de la cuadrícula.
Eso es todo, amigos. Esperamos que la cuadrícula CSS le ayude a concretar los diseños de esas casillas de verificación..
