CSS - Consulta CSS

 
Vista:
Imágen de perfil de Jaume

Consulta CSS

Publicado por Jaume (2 intervenciones) el 18/03/2018 19:54:48
Hola! estoy un poco desesperado con esto..
Tengo unos botones radio que mediante css los utilizo como valoraciones estrella (es decir cambian de color al hacer click en alguna de ellas y se marcan todas las anteriores)

este es el código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
 
form{ width:100%; margin:0 auto; padding:10px; border: 0px solid #d9d9d9;}
form p, form input[type = "submit"]{text-align:center; font-size:20px;}
 
 
input[type = "radio"]{ display:none;/*position: absolute;top: -1000em;*/}
label{ color:grey;}
 
.clasificacion{
    direction: rtl;
    unicode-bidi: bidi-override;
}
 
label:hover,
label:hover ~ label{color:red;}
input[type = "radio"]:checked ~ label{color:red;}
 
</style

ahora el problema viene cuando tengo otros 2 botones radio que se comportan igual que las estrellas.. y no consigo de manera alguna que hagan lo siguiente:
Por defecto salgan en gris y que se ponga en color verde al hacer click en SI y en rojo al hacer click en NO

1
2
<input id="radio26" type="radio" value="NO" name="R6"><label for="radio26"><font face="Tahoma" size="5">no</font></label>
<input id="radio27" type="radio" value="SI" name="R6"><label for="radio27"><font face="Tahoma" size="5">SI</font></label>

alguien me puede echar un cable?

Gracias!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de santi
Val: 68
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Consulta CSS

Publicado por santi (27 intervenciones) el 18/03/2018 23:49:39
Hola,

puedes utilizar not(checked):

1
input[type = "radio"]:not(:checked) + label{color:grey;}

Y no se con que versión de html lo estás haciendo pero la etiqueta <font> está un poco desfasada.. Para ello añádelo directamente en el css con font-family: Tahoma;

Saludos ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Jaume

Consulta CSS

Publicado por Jaume (2 intervenciones) el 19/03/2018 01:45:59
hola, muchas gracias por tu respuesta, lo he probado y funciona bien pero entonces las estrellas de valoración dejan de rellenarse las anteriores y solo se marca la que está presionada.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar