Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: R3LI4NT en Septiembre 08, 2021, 03:06:42 am

Título: Personalizar checkboxes con CSS
Publicado por: R3LI4NT en Septiembre 08, 2021, 03:06:42 am
Personalizar checkboxes con CSS

Código HTML:

Código: Text
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Checkboxes</title>
  8.     <link rel="stylesheet" href="style.css">
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  10. </head>
  11. <body>
  12.         <label>
  13.             <input type="checkbox">
  14.             <span class="btn"></span>
  15.             <i class="fa fa-power-off icon"></i>
  16.         </label>
  17.        
  18.         <label>
  19.             <input type="checkbox">
  20.             <span class="btn"></span>
  21.             <i class="fab fa-bluetooth-b icon"></i>
  22.         </label>
  23.    
  24.         <label>
  25.             <input type="checkbox">
  26.             <span class="btn"></span>
  27.             <i class="fas fa-plane icon"></i>
  28.         </label>  
  29.    
  30.         <label>
  31.             <input type="checkbox">
  32.             <span class="btn"></span>
  33.             <i class="fas fa-bell icon"></i>
  34.         </label>
  35.        
  36.         <label>
  37.             <input type="checkbox">
  38.             <span class="btn"></span>
  39.             <i class="fas fa-battery-full icon"></i>
  40.         </label>
  41.        
  42.         <label>
  43.             <input type="checkbox">
  44.             <span class="btn"></span>
  45.             <i class="fas fa-wifi icon"></i>
  46.         </label>
  47. </body>
  48. </html>
  49.  


Código CSS:

Código: CSS
  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;
  5. }
  6.  
  7. body {
  8.     height: 100vh;
  9.     width: 100%;
  10.     justify-content: center;
  11.     align-items: center;
  12.     display: grid;
  13.     grid-template-columns: repeat(3, 8em);  
  14.     background: #242526;
  15. }
  16.  
  17. label {
  18.     position: relative;
  19.     width: 80px;
  20.     height: 80px;
  21.     cursor: pointer;
  22.     border-radius: 50%;
  23.     margin: 0 20px;
  24. }
  25.  
  26. label .btn {
  27.     position: absolute;
  28.     top: 0;
  29.     left: 0;
  30.     width: 100%;
  31.     height: 100%;
  32.     box-shadow: 0 2px 4px rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
  33.     inset 0 -1px 5px rgba(255, 255, 255,.7) , 0 0 2px 2px #000,
  34.     0 0 2px 0px #0F0F0F;
  35.     border-radius: 50%;
  36.     background: #1A1A1A;
  37. }
  38.  
  39. label input[type='checkbox'] {
  40.     -webkit-appearance: none;
  41. }
  42.  
  43. label input[type='checkbox']:checked ~ .btn
  44. {
  45.     box-shadow: 0 0 0 rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
  46.     inset 1px 1px rgba(255, 255, 255,.1), 0 0 0 2px #000,
  47.     0 0 0 3px #0F0F0F, 0 0 15px 8px #00B9DE;
  48.     font-size: 10px;
  49. }
  50.  
  51. label input[type='checkbox']:checked ~ .fa {
  52.     color: #00B9DE;
  53.     text-shadow: 0 0 13px #00B9DE,
  54.                 0 0 25px #00B9DE;
  55. }
  56.  
  57. label input[type='checkbox']:checked ~ .fab {
  58.     color: #00B9DE;
  59.     text-shadow: 0 0 13px #00B9DE,
  60.                 0 0 25px #00B9DE;
  61. }
  62.  
  63. label input[type='checkbox']:checked ~ .fas {
  64.     color: #00B9DE;
  65.     text-shadow: 0 0 13px #00B9DE,
  66.                 0 0 25px #00B9DE;
  67. }
  68.  
  69. label .icon {
  70.     position: absolute;
  71.     top: 50%;
  72.     left: 50%;
  73.     transform: translate(-50%,-50%);
  74.     font-size: 2.1em;
  75. }
  76.  
  77. label .icon {
  78.     position: absolute;
  79.     top: 50%;
  80.     left: 50%;
  81.     transform: translate(-50%,-50%);
  82.     font-size: 2.2em;
  83. }
  84.  
  85. label .fa-plane {
  86.     font-size: 1.9em;
  87. }
  88.  
  89. label .fa-bell {
  90.     font-size: 1.9em;
  91. }
  92.  
  93. label .fa-battery-full {
  94.     font-size: 1.9em;
  95. }
  96.  
  97. label .fa-wifi {
  98.     font-size: 1.9em;
  99. }
  100.  

(https://i.ibb.co/wh0KKkX/Captura-de-pantalla-246.png)

(https://i.ibb.co/bgMWNLw/ezgif-com-gif-maker.gif)

El pseudo-clase ":checked" representa el radio (checkbox) al momento de ser presionado.
Título: Re:Personalizar checkboxes con CSS
Publicado por: poseidon en Septiembre 09, 2021, 08:05:23 pm
Estan muy chulos, me entran ganas de dormir mirandolos ajaja
Título: Re:Personalizar checkboxes con CSS
Publicado por: R3LI4NT en Septiembre 09, 2021, 08:37:12 pm
Estan muy chulos, me entran ganas de dormir mirandolos ajaja
Ahí tenés el icono del avión para ponerte en "modo avión" jajaj. Están buenos para hacer un panel de control, quedaría chulo.