Autor Tema: Personalizar checkboxes con CSS (Leído 2454 veces)

R3LI4NT · « **en:** Septiembre 08, 2021, 03:06:42 am »

Personalizar checkboxes con CSS

Código HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkboxes</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fa fa-power-off icon"></i>
        </label>
        
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fab fa-bluetooth-b icon"></i>
        </label>
    
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fas fa-plane icon"></i>
        </label>  
    
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fas fa-bell icon"></i>
        </label>
        
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fas fa-battery-full icon"></i>
        </label>
        
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fas fa-wifi icon"></i>
        </label>
</body>
</html>
 

Código CSS:

Código: CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(3, 8em);  
    background: #242526;
}
 
label {
    position: relative;
    width: 80px;
    height: 80px;
    cursor: pointer;
    border-radius: 50%;
    margin: 0 20px;
}
 
label .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
    inset 0 -1px 5px rgba(255, 255, 255,.7) , 0 0 2px 2px #000,
    0 0 2px 0px #0F0F0F;
    border-radius: 50%;
    background: #1A1A1A;
}
 
label input[type='checkbox'] {
    -webkit-appearance: none;
}
 
label input[type='checkbox']:checked ~ .btn
{
    box-shadow: 0 0 0 rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
    inset 1px 1px rgba(255, 255, 255,.1), 0 0 0 2px #000,
    0 0 0 3px #0F0F0F, 0 0 15px 8px #00B9DE;
    font-size: 10px;
}
 
label input[type='checkbox']:checked ~ .fa {
    color: #00B9DE;
    text-shadow: 0 0 13px #00B9DE,
                0 0 25px #00B9DE;
}
 
label input[type='checkbox']:checked ~ .fab {
    color: #00B9DE;
    text-shadow: 0 0 13px #00B9DE,
                0 0 25px #00B9DE;
}
 
label input[type='checkbox']:checked ~ .fas {
    color: #00B9DE;
    text-shadow: 0 0 13px #00B9DE,
                0 0 25px #00B9DE;
}
 
label .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.1em;
}
 
label .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.2em;
}
 
label .fa-plane {
    font-size: 1.9em;
}
 
label .fa-bell {
    font-size: 1.9em;
}
 
label .fa-battery-full {
    font-size: 1.9em;
}
 
label .fa-wifi {
    font-size: 1.9em;
}
 

El pseudo-clase ":checked" representa el radio (checkbox) al momento de ser presionado.

poseidon · « **Respuesta #1 en:** Septiembre 09, 2021, 08:05:23 pm »

Estan muy chulos, me entran ganas de dormir mirandolos ajaja

R3LI4NT · « **Respuesta #2 en:** Septiembre 09, 2021, 08:37:12 pm »

Cita de: poseidon en Septiembre 09, 2021, 08:05:23 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.

Samsung duplica su eficiencia en sus nuevos chips de 3 nanómetros

Autor Tema: Personalizar checkboxes con CSS (Leído 2454 veces)

R3LI4NT

Personalizar checkboxes con CSS

poseidon

Re:Personalizar checkboxes con CSS

R3LI4NT

Re:Personalizar checkboxes con CSS