Este método puro CSS3 para embellecer los botones de radio funciona bien en las siguientes situaciones:
1. Puede ser compatible con IE9 y superiores, y si necesita ser compatible con IE8, escribir el hack de IE para eliminar ese estilo
2. Solo se soporta radio con botón de radio, porque el círculo del estilo de selección de botón de opción puede hacerse con CSS, pero la casilla de verificación de botón de verificación requiere una biblioteca de fuentes de imagen o iconos
3. No se requiere JS para soportar efectos de cambio
La imagen de abajo es la representación final:
Código HTML:
Código CSS:
Lo más importante en este método es seleccionar el nombre de clase del efecto: .radio input:checked + span.radio-on
+ es una pseudoclase de CSS2, lo que significa que div+p selecciona <div> todos los elementos inmediatamente después del <p> elemento .
Es decir, encontrar la entrada seleccionada (:checked) y luego usar el elemento span llamado radio-on para realizar el efecto círculo seleccionado.
Existen muchos métodos de embellecimiento en Internet para hacer que la etiqueta forme un círculo, pero en este caso, el texto de selección única debe colocarse fuera de la etiqueta, lo que hace que al hacer clic en el texto, el efecto de selección única no pueda cambiarse.
Así que añadí un tramo llamado radio-bg a la etiqueta para hacer el círculo grande en la parte trasera, y luego usé un tramo llamado radio-on para hacer el círculo pequeño en la parte delantera de la selección.
De este modo, el texto en la etiqueta se conserva y el efecto de una sola selección también puede activarse.
Adjunto: jQuery toma el método de valor de la radio seleccionada
var val=$('input:radio[name="sex"]:checked').val();
Adjunta los tres métodos:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Publicado en 16/5/2019 11:10:41
|
|
|
|
