Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: LoboBlanco en 12 de Febrero 2017, 11:05
-
Hola :)
¿Alguien podría decirme como puedo presentar en pantalla el simbolo de control radio, ese "circulito" que está al comienzo de las distintas opciones de un formulario tipo control radio?
Tanto cuando no esta marcado, como cuando sí lo está y es un circulito con un punto verde en su centro.
Creo que no es ningún caracter ascii, ¿son dos imagenes?
¿Se puede hacer con circle o alguna función de php?
Muchas gracias
-
Buenas.
En realidad es una imagen.
Pero hacer algo así con php sería muy trabajoso, es mucho más fácil con css. Te dejo un pequeño ejemplo:
He creado esta imagen:
(http://i.imgur.com/CHcP084.png)
Y luego con este código creas el efecto para cuando se pulsa una u otra opción:
<!DOCTYPE html>
<html>
<head>
<title>https://www.aprenderaprogramar.com</title>
<meta charset="UTF-8" />
<style>
input[type="radio"]{
display: none;
}
label {
padding-left: 1.7em;
background: url('http://i.imgur.com/CHcP084.png') no-repeat top left;
background-size: 16px 32px;
}
input[type="radio"] + label {
background-position: 0 0px;
width: 30px;
height: 30px;
}
input[type="radio"]:checked + label {
background-position: 0 -15px;
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<form>
<input type="radio" name="option1" id="radio1" checked />
<label for="radio1">Uno</label>
<br/>
<input type="radio" name="option1" id="radio2" />
<label for="radio2">Dos</label>
<br/>
<input type="radio" name="option1" id="radio3" />
<label for="radio3">Tres</label>
<br/>
<input type="radio" name="option1" id="radio4" />
<label for="radio4">Cuatro</label>
</form>
</body>
</html>
Saludos. ;D