Accentsconagua
Share
¿Alguna vez te has preguntado cómo diseñar casillas de verificación y botones de radio, pero sin JavaScript? Gracias a CSS3 puedes! Esto es lo que vamos a construir (Nota: para aprender cómo hacer que estos sean accesibles, también puedes ver este tutorial):
Si está buscando algunos gráficos para usar con sus elementos de UI de formulario, eche un vistazo a los kits de UI disponibles en Envato Elements. De lo contrario, toma una taza de café y comienza con este tutorial.!
Lectura recomendada: Los 30 selectores de CSS que debes memorizar
Para aquellos de ustedes que ya se sienten confiados en sus habilidades de CSS y solo quieren un empujón en la dirección correcta, aquí está la línea más importante de CSS en todo el tutorial:
entrada [tipo = "casilla de verificación"]: marcado + etiqueta
Ahora, para aquellos de ustedes que sienten que pueden necesitar más dirección, no teman, sigan leyendo!
Bien, volvamos al tema ahora. ¿Qué vamos a hacer exactamente? Bueno, debido a la ingeniosa pequeña de CSS3 :comprobado pseudo selector, podemos orientar un elemento en función de su estado marcado (o no seleccionado). Entonces podemos usar el + selector de hermanos adyacentes de CSS2.1 para apuntar al elemento directamente después de la casilla de verificación o radio, que en nuestro caso es la etiqueta.
Ahora, comenzamos por crear nuestros archivos HTML y CSS (o como prefiera manejar sus estilos) y comience a trabajar. Asumiré que sabes cómo hacerlo, así que no tendremos que entrar en eso.
Con el fin de ponerlo en camino, solo demostraré esta técnica en una casilla de verificación, pero el proceso para los botones de opción es idéntico y está incluido en la fuente..
De acuerdo, empecemos entonces, ¿de acuerdo? Comenzamos creando nuestra entrada de casilla de verificación, seguida de una etiqueta.
Ahora, por si acaso no sabes mucho sobre el Elemento, debe conectar la entrada y la etiqueta para que pueda interactuar con la entrada a través de la etiqueta. Esto se hace usando, para = "" y el ID de entrada.
También agregaré un dentro de la etiqueta, que es una preferencia más personal que cualquier otra cosa, pero todo se aclarará en el paso 3.
Aquí es donde la diversión comienza. Lo primero que hacemos, que es la base de todo este tutorial, es ocultar la casilla de verificación real.
input [type = "checkbox"] display: none;
Ahora que hemos terminado, podemos diseñar la etiqueta, pero más específicamente el espacio dentro de la etiqueta. Lo hago de esta manera para darme más control sobre la posición exacta de la casilla de verificación. Sin él, probablemente estaría usando una imagen de fondo en la etiqueta directamente, y su ubicación puede resultar difícil.
input [type = "checkbox"] display: none; input [type = "checkbox"] + intervalo de etiquetas display: inline-block; ancho: 19px; altura: 19px; fondo: url (check_radio_sheet.png) izquierda arriba no-repetir;
Muy bien, déjame explicarte esto rápidamente. En primer lugar, observe el fondo. Tengo una pequeña hoja de sprites para estos, así que todo lo que tengo que hacer es establecer la posición de fondo en este intervalo. El intervalo en sí es el ancho y la altura exactos de cada "sprite" en la hoja, lo que facilita la definición de cada estado.
Nuestra hoja de sprites. Aquí está el resto del CSS, específico a mi estilo. Esto es puramente para la estética y específico para mi gusto o este diseño..
input [type = "checkbox"] display: none; input [type = "checkbox"] + intervalo de etiquetas display: inline-block; ancho: 19px; altura: 19px; margen: -2px 10px 0 0; alineación vertical: medio; fondo: url (check_radio_sheet.png) izquierda arriba no-repetir; cursor: puntero;
No queda mucho trabajo, así que vamos a terminar con esto. Lo último que deberá hacer es proporcionar un estado para el elemento cuando se verifique la entrada y, opcionalmente, también para el desplazamiento. Esto es bastante simple, solo eche un vistazo!
input [type = "checkbox"] display: none; input [type = "checkbox"] + intervalo de etiquetas display: inline-block; ancho: 19px; altura: 19px; margen: -2px 10px 0 0; alineación vertical: medio; fondo: url (check_radio_sheet.png) izquierda arriba no-repetir; cursor: puntero; entrada [tipo = "casilla de verificación"]: marcado + intervalo de etiquetas fondo: url (check_radio_sheet.png) -19px arriba no-repetir;
Note que debido a que usé una hoja de sprites, todo lo que tengo que hacer es cambiar la posición de fondo. Tenga en cuenta, además, que todo lo que tenía que hacer para diseñar el intervalo de la etiqueta para cuando "marque" una casilla de verificación / botón de radio, fue usar el CSS3 :comprobado pseudo selector.
Los pseudo selectores tienen un gran soporte en todos los navegadores, pero se aplican las advertencias habituales, y el respaldo es bastante elegante:
¿Puedo usar datos para pseudo selectores generales?
Fallback: IE9 en Windows 7 Los navegadores móviles tempranos también son un problema - el soporte de :comprobado no esta claro. Mobile Safari pre iOS 6 no hace Apóyalo, por ejemplo.
Muy bien, así que hemos terminado, ¿verdad? Bueno, vamos a hacer una doble verificación. Primero el HTML:
¿El tuyo se ve igual? No olvides añadir en eso ! Al experimentar con esto por tu cuenta, te sugiero que encuentres formas nuevas o diferentes de hacer esta parte. Me encantaría ver qué se te ocurre para hacerlo más eficiente. Ahora para el CSS:
input [type = "checkbox"] display: none; input [type = "checkbox"] + intervalo de etiquetas display: inline-block; ancho: 19px; altura: 19px; margen: -2px 10px 0 0; alineación vertical: medio; fondo: url (check_radio_sheet.png) izquierda arriba no-repetir; cursor: puntero; entrada [tipo = "casilla de verificación"]: marcado + intervalo de etiquetas fondo: url (check_radio_sheet.png) -19px arriba no-repetición;
¿Todo el presente? Perfecto. Tenga en cuenta que gran parte de este estilo es específico del estilo que creé para los archivos de demostración. Te animo a que crees el tuyo y experimentes con la ubicación y la presentación..
En conclusión, lo más importante que puedes sacar de esto es la primera línea de CSS que escribí en la parte superior:
entrada [tipo = "casilla de verificación"]: marcado + etiqueta
Usando eso, puedes crear una forma completa de cosas diferentes. Las posibilidades con :comprobado Vaya más allá de las casillas de verificación y las radios para usarlas en formularios, pero lo dejaré para que experimente con eso por su cuenta. Algunas cosas para experimentar con:
Espero que hayan disfrutado este breve artículo y espero que tomen lo que ven aquí y lo amplíen o lo mejoren.!
Para finalizar, hemos creado una guía completa para ayudarlo a aprender CSS, ya sea que esté comenzando con lo básico o si desea explorar CSS más avanzados..
