Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Personalizar checkbox y radio

Estas en el tema de Personalizar checkbox y radio en el foro de CSS en Foros del Web. Buenas a todos, necesito una ayuda para la personalización de input checkbox y radio. En principio todo va perfecto, pero no consigo hacer que el ...
  #1 (permalink)  
Antiguo 03/07/2016, 02:21
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 8 años, 5 meses
Puntos: 67
Personalizar checkbox y radio

Buenas a todos, necesito una ayuda para la personalización de input checkbox y radio.

En principio todo va perfecto, pero no consigo hacer que el input sin personalizar se oculte y a la misma vez pueda darle clic para hacer el efecto de personalización.

Os dejo el código:

Código CSS:
Ver original
  1. input[type=checkbox],
  2. input[type=radio] {
  3.     position: absolute;
  4.     margin: 0;
  5.     cursor: pointer;
  6.     outline: none;
  7.     opacity: 1;
  8.     display: inline-block;
  9. }
  10. .checkbox,
  11. .radio {
  12.     display: inline-block;
  13.     font-size: 14px;
  14.     line-height: 18px;
  15.     margin-top: 10px;
  16.     vertical-align: middle;
  17. }
  18. .checkbox:before,
  19. .radio:before {
  20.     content: "\f096";
  21.     font-family: fontawesome;
  22.     display: inline-block;
  23.     font-size: 18px;
  24.     vertical-align: middle;
  25.     background-color: none;
  26.     margin: 0;
  27.     padding-right: 5px;
  28. }
  29. input[type=checkbox]:checked + .checkbox:before,
  30. input[type=radio]:checked + .radio:before {
  31.     content: "\f046";
  32.     font-family: fontawesome;
  33.     font-size: 18px;
  34.     color: #e37222;
  35.     padding-right: 3px;
  36. }

Un saludo.
__________________
No te preocupes si tu código no funciona bien. Si todo lo hiciera, no tendrías trabajo.
  #2 (permalink)  
Antiguo 08/07/2016, 01:19
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 5 meses
Puntos: 1146
Respuesta: Personalizar checkbox y radio

prueba esto
https://jsfiddle.net/fLoexxw7/
  #3 (permalink)  
Antiguo 08/07/2016, 01:46
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 8 años, 5 meses
Puntos: 67
Respuesta: Personalizar checkbox y radio

Cita:
Iniciado por ArturoGallegos Ver Mensaje
Muchas gracias

Etiquetas: background, checkbox, color, personalizar, radio, todo
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 01:31.