Para personalizarun radio button con CSS, como te decía en el primer post de esta mini guía; Radio Buttons, Checkbox y select personalizados con CSS vamos a tener que ocultarlos. Incluiremos una etiqueta <i> dentro del mismo <label>. Y con las pseudo clases :before de la etiqueta <i> dibujaremos nuestro checkbox personalizado.
|
1 2 3 4 |
<label class="content-input"> <input type="checkbox" name="Vehiculo" id="autovia" value="autovia">Autovia <i></i> </label> |
Recuerda que este post forma parte de una mini guía:
- Radio Buttons, Checkbox y select personalizados con CSS
- Personalizar un radio button con CSS
- Personalizar un checkbox con CSS y animarlo
- Personalizar un select con CSS
Ocultar inputs con Css
Para ocultar los inputs primero vamos a aplicar la propiedad y valor de css appearence:none. Con ello estamos especificando a los navegadores que no apliquen ninguna apariencia por defecto y nos permitira editar su CSS.
Después de utilizar esta propiedad y valor visibility:hidden para ocultar los inputs. Da igual que el checkbox no sea visible porque cada vez que hacemos click en la etiqueta label este se activa.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.content-input input, .content-select select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; } .content-input input{ visibility: hidden; position: absolute; right: 0; } |
¿Cómo personalizar un radio button con CSS?
Vamos a crear dos círculos con nuestra <i> y los posicionaremos a la izquierda del contenedor <label>.
Lo primero que haremos será definir <label>, con una posición relativa para poder mover el elemento <i> tomando de referencia la etiqueta <label>. Además vamos a aplicar un padding de 60px a la izquierda. Este espacio será donde ubiquemos nuestra etiqueta <i>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.content-input{ position: relative; margin-bottom: 30px; padding:5px 0 5px 60px; /* Damos un padding de 60px para posicionar el elemento <i> en este espacio*/ display: block; } /* Estas reglas se aplicarán a todos las elementos i después de cualquier input*/ .content-input input + i{ background: #f0f0f0; border:2px solid rgba(0,0,0,0.2); position: absolute; left: 0; top: 0; } /* Estas reglas se aplicarán a todos los i despues de un input de tipo radio*/ .content-input input[type=radio] + i{ height: 30px; width: 30px; border-radius: 100%; left: 15px; } |
Resultado
Con el código anterior tendríamos un circulo posicionado a la izquierda de nuestro contenedor.
Para dibujar el círculo que debe aparecer cuando hacemos click seguimos la misma dinámica utilizando el pseudo elemento :before
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.content-input input[type=radio] + i:before{ content: ''; display: block; height: 18px; width: 18px; background: red; border-radius: 100%; position: absolute; z-index: 1; top: 4px; left: 4px; background:#2AC176; transition: all 0.25s ease; /* Todas las propiedades | tiempo | tipo movimiento */ transform: scale(0) /* Lo reducimos a 0*/ ; opacity: 0; /* Lo ocultamos*/ } |
Añadir efectos cuando hacemos click
Los elementos como radio buttons y checkbox tienen la pseudo clase :checked, la cual aplicará un estilo cuando está hecha la selección. Lo que haremos será mostrar este segundo círculo cuando el radio button esté seleccionado:
|
1 2 3 4 |
.content-input input[type=radio]:checked + i:before{ transform: scale(1); opacity: 1; } |
Por último, añadiremos un color de fondo a nuestro radio cuando pongamos el cursor encima y el radio button no esté seleccionado:
|
1 2 3 |
.content-input:hover input[type=radio]:not(:checked) + i{ background: #B1E8CD; } |
Siguiente post:
Personalizar y animar un checkbox con CSS
Realice este procedimiento y al final no detecta cuando doy click al radio, supuse que a lo mejor tenía mal, así que copie y pegue lo mismo y sigue sin funcionar. Usaste algún código en javascript();
En complemento a mi comentario anteror, recuerden quitar el atributo for al label, es por ello que no funcionaba en mi caso, olvide que al poner la etiqueta label, vscode pone el atributo for en automático, y no me percate de ello. Gracias por el tutorial 🙂