Foros del Web » Creando para Internet » CSS »

Agregar estilo a un input radio para mostrarse en chrome y safari

Estas en el tema de Agregar estilo a un input radio para mostrarse en chrome y safari en el foro de CSS en Foros del Web. Hola a todos, estoy armando un formulario en el que incluyo un input de tipo radio, el problema es que mientras que en Firefox se ...
  #1 (permalink)  
Antiguo 31/10/2014, 21:48
 
Fecha de Ingreso: agosto-2014
Ubicación: Cd. de México
Mensajes: 22
Antigüedad: 9 años, 7 meses
Puntos: 0
Agregar estilo a un input radio para mostrarse en chrome y safari

Hola a todos, estoy armando un formulario en el que incluyo un input de tipo radio, el problema es que mientras que en Firefox se ve la casilla y al darle clic le sale una palomita de que esta seleccionada, en chrome solo aparece un cuadrito, lo que quisiera es que pudiera verse si no igual si que se muestre la casilla seleccionada de alguna forma para que el usuario sepa qué ha elegido, por que asi pareciera que no hace nada.
Esto es lo que tengo:
// Una clase para darle tamaño
<style>
.borderExampleCheckbox {
border: 1px solid #456987;
display: inline-block;
width: 1em;
height: 1em;
-webkit-border-radius:3px;
-moz-border-radius:3px;
margin: 0 5px 0 0;
}
</style>


y dentro de form:

<p>Seleccione una opcion:</p>
<br/>
<input class="borderExampleCheckbox" name="registro" type="radio" id="registro" value="Opcion1" checked /> Opcion 1

<input class="borderExampleCheckbox" name="registro" type="radio" id="registro" value="Opcion2"/>Opcion2



Si alguien sabe una forma con css lo agradeceré mucho.
Saludos!!!
  #2 (permalink)  
Antiguo 03/11/2014, 14:45
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Agregar estilo a un input radio para mostrarse en chrome y safari

Dale a un vistaso a esto amigo
http://www.csslab.cl/2014/03/17/checkboxes-con-estilo/
espero que te sirva amigo
  #3 (permalink)  
Antiguo 04/11/2014, 07:06
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 8 meses
Puntos: 44
Respuesta: Agregar estilo a un input radio para mostrarse en chrome y safari

No entiendo bien a qué te referís. En los dos sale grisado el radiobutton que tiene el atributo checked en él.

La única diferencia que veo es que en Firefox le sale un cuadrito naranja alrededor, pero en los dos se nota claramente cuál es el que está seleccionado.

Un consejo: poné el texto de los input dentro de un label que tenga como atributo for el mismo id que esos input. Te va a permitir que el usuario pueda seleccionar los radiobutton haciendo click en el texto y no solamente en el ícono.
Y una cosa más: ambos radiobutton tienen el mismo id. Recordá que ese atributo no puede repetirse.

Código HTML:
<input class="borderExampleCheckbox" name="registro" type="radio" id="registro1" value="Opcion1" checked /><label for="registro1">Opcion 1</label>
<input class="borderExampleCheckbox" name="registro" type="radio" id="registro2" value="Opcion2"/><label for="registro2">Opcion 2</label> 
Saludos :)

Etiquetas: chrome, estilo, formulario, input, php, radio, registro, safari
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:02.