Autor Tema: Php ¿Cómo se puede presentar en pantalla el simbolo a marcar de control radio? (Leído 2159 veces)

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

pedro,, · « **Respuesta #1 en:** 16 de Febrero 2017, 00:21 »

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:

Y luego con este código creas el efecto para cuando se pulsa una u otra opción:

Código: [Seleccionar]

<!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.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: