Entrada

Estilo radio button como botones

Cómo cambiar el estilo de radiobuttons con CSS para que parezcan botones

El problema es que todo lo que se encuentra tiene por una parte el <label> y por otra los <input>.

En este caso usando el Contact Form 7 mete dentro de <label> los <input>, por lo que la propiedad input[type=radio]:checked no se puede aplicar, sólo aplica el estilo a los <span> que están debajo.

Lo que tenemos que usar es la propiedad :has() de CSS que lo que hace es una condición, si X:has(condicion){aplica estos estilos}

1
2
3
4
5
6
7
8
9
<label>
  <input type="radio" name="radio-cantidad-donada" value="15 €" checked="checked">
  <span class="wpcf7-list-item-label">15 €</span>
</label>

<label>
  <input type="radio" name="radio-cantidad-donada" value="35 €">
  <span class="wpcf7-list-item-label">35 €</span>
</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.donacion-personalizada input[type="radio"] {
    display:none;
}

.donacion-personalizada label:has(input[type=radio]:checked) {
  background: blue;
	color: white;
}

.donacion-personalizada label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
    z-index:90;
}

.donacion-personalizada label > input[type="radio"]:checked + *::before, .donacion-personalizada label > input[type="radio"]+ *::before {
	display:none;
}
Esta entrada está licenciada bajo CC BY 4.0 por el autor.