Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: .:Xx4NG3LxX:. en Septiembre 20, 2020, 06:33:53 pm

Título: [HTML][CSS] Personalizar los radio buttons y checkboxes a través de CSS
Publicado por: .:Xx4NG3LxX:. en Septiembre 20, 2020, 06:33:53 pm
Saludos, siguiendo el ejemplo del compañero R3LI4NT, decidí postear mi aporte en esta sección...

Se trata de la personalización de los radio buttons y los checkboxes a través de CSS, lo he hecho por mi cuenta... Let's begin!

Primero el HTML, es muy simple...

Código: Text
  1. <!-- RADIO BUTTONS -->
  2. <input type="radio" name="tutorial" class="rb" /><b>Click</b>
  3. <br />
  4. <input type="radio" name="tutorial" class="rb" /><b>Click</b>
  5. <br />
  6.  
  7. <!-- CHECKBOX -->
  8.  
  9. <input type="checkbox" class="cb" /><b>Click</b>

Aquí se definieron los elementos a personalizar...

El CSS (lo más emocionante). Haremos uso del pseudo ":checked" (para ver si esta apretado) y ":before" (para dibujar)...

Código: CSS
  1. /* RADIO BUTTONS */
  2.  
  3. .rb {
  4.   -webkit-appearance: none;
  5.   display: inline;
  6.   margin: 30px;
  7. }
  8.  
  9. .rb:before, .rb::before {
  10.   content: '';
  11.   width: 10px;
  12.   height: 10px;
  13.   border: 2px solid blue;
  14.   position: absolute;
  15.   border-radius: 50%;
  16.   padding: 3px;
  17.   cursor: pointer;
  18. }
  19.  
  20. .rb:checked:before, .rb:checked::before {
  21.   background-position: center center;
  22.   background-clip: content-box;
  23.   background: blue;
  24.   transition: all .3s ease;
  25. }
  26.  

Con eso estaríamos listos... ¿Y el estilo de los checkboxes?

R: es lo mismo sólo cambien las clases, y sus estilos (colores, bordes, etc...)..

Resultado:

(https://i30.servimg.com/u/f30/20/15/95/88/image88.jpg)

Saludos...
Título: Re:[HTML][CSS] Personalizar los radio buttons y checkboxes a través de CSS
Publicado por: R3LI4NT en Septiembre 20, 2020, 07:54:09 pm
Excelente aporte Xx4NG3LxX! Puede que me sirva a futuro

Saludos