Puede verse este ejemplo en vivo en: [https://codepen.io/LUIS-SEBASTIAN-DE-LOS-ANGELES-HERNANDEZ/pen/vEOMwoY]
Created
July 15, 2025 10:58
-
-
Save kurotori/f5fdff60bee270440dd878bdc20f311c to your computer and use it in GitHub Desktop.
Checkbox y Radiobutton modificados, con Tailwind CSS (por CDN)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "tailwindcss"; | |
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| margin: 20px; | |
| } | |
| .check + label > div { | |
| transition: all 200ms; | |
| } | |
| .check + label::after { | |
| content: 'No'; | |
| color: red; | |
| font-weight: bold; | |
| } | |
| .check:checked + label::after { | |
| content: 'Si'; | |
| color: green; | |
| font-weight: bold; | |
| } | |
| .check:checked + label > div { | |
| background-color: oklch(87.9% 0.169 91.605) ; | |
| } | |
| .check:checked + label > div > div{ | |
| left: 1.4em; | |
| right: 0px; | |
| background-color: oklch(76.9% 0.188 70.08); | |
| } | |
| .radio:checked + label > div{ | |
| background-color: oklch(87.9% 0.169 91.605) ; | |
| } | |
| .radio:checked + label > div > div{ | |
| top: 0.15em; | |
| border: none; | |
| background-color: oklch(76.9% 0.188 70.08); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> | |
| <link rel="stylesheet" href="estilo.css"> | |
| <title>Document</title> | |
| </head> | |
| <body class=""> | |
| <h1 class="text-[1.8rem] font-bold">Ejemplo: CheckBox y RadioButtons Modificados</h1> | |
| <br> | |
| <div class="max-w-[500px] min-w-[400px] bg-slate-100 rounded-2xl p-[1.5em]"> | |
| <div class=""> | |
| <h2 class="text-[1.2rem] font-bold text-gray-400">1 - RadioButton</h2> | |
| <fieldset> | |
| <legend> | |
| <h2 class="text-[1.2rem] font-bold">Sabores:</h2> | |
| </legend> | |
| <div id="sabor" class="grid grid-rows-3 gap-2"> | |
| <input type="radio" class="radio hidden" name="sabor" id="sabor1" value="comun"> | |
| <label class="grid grid-cols-[1.5fr_0.5fr_1fr]" for="sabor1"> | |
| <span class="pr-[1em] font-bold pl-[1em]">Común:</span> | |
| <div class="abertura top-[0.05em] relative h-[1.6em] w-[1.6em] bg-gray-400 inset-shadow-sm/50 rounded-2xl"> | |
| <div class="perilla absolute flex justify-center items-center left-[0.15em] top-[0em] h-[1.3em] w-[1.3em] bg-gray-500 shadow-md/100 border-b-black border-b-2 rounded-2xl active:top-[0.1em] transition-all duration-100"> | |
| <div class="absolute h-[0.8em] aspect-square rounded-2xl hover:bg-amber-200"></div> | |
| </div> | |
| </div> | |
| </label> | |
| <input type="radio" class="radio hidden" name="sabor" id="sabor2" value="muzzarella"> | |
| <label class="grid grid-cols-[1.5fr_0.5fr_1fr]" for="sabor2"> | |
| <span class="pr-[1em] font-bold pl-[1em]">Muzzarella:</span> | |
| <div class="abertura top-[0.05em] relative h-[1.6em] w-[1.6em] bg-gray-400 inset-shadow-sm/50 rounded-2xl overflow-hidden "> | |
| <div class="perilla absolute flex justify-center items-center left-[0.15em] top-[0em] h-[1.3em] w-[1.3em] bg-gray-500 shadow-md/100 border-b-black border-b-2 rounded-2xl active:top-[0.1em] transition-all duration-100"> | |
| <div class="absolute h-[0.8em] aspect-square rounded-2xl hover:bg-amber-200"></div> | |
| </div> | |
| </div> | |
| </label> | |
| <input type="radio" class="radio hidden" name="sabor" id="sabor3" value="panceta"> | |
| <label class="grid grid-cols-[1.5fr_0.5fr_1fr]" for="sabor3"> | |
| <span class="pr-[1em] font-bold pl-[1em]">Panceta:</span> | |
| <div class="abertura top-[0.05em] relative h-[1.6em] w-[1.6em] bg-gray-400 inset-shadow-sm/50 rounded-2xl overflow-hidden "> | |
| <div class="perilla absolute flex justify-center items-center left-[0.15em] top-[0em] h-[1.3em] w-[1.3em] bg-gray-500 shadow-md/100 border-b-black border-b-2 rounded-2xl active:top-[0.1em] transition-all duration-100"> | |
| <div class="absolute h-[0.8em] aspect-square rounded-2xl hover:bg-amber-200"></div> | |
| </div> | |
| </div> | |
| </label> | |
| </div> | |
| </fieldset> | |
| </div> | |
| <div> | |
| <h2 class="text-[1.2rem] font-bold text-gray-400">2 - CheckBox</h2> | |
| <h2 class="text-[1.2rem] font-bold">Extras: </h2> | |
| <div class="grid grid-rows-2 gap-2 w-full"> | |
| <input type="checkbox" class="hidden check" name="conFritas" id="fritas"> | |
| <label class="grid grid-cols-[1.5fr_0.5fr_1fr] " for="fritas"> | |
| <span class="pr-[1em] font-bold pl-[1em]">Con Fritas: </span> | |
| <div class="abertura top-[0.05em] relative h-[1.6em] w-[3em] bg-gray-400 inset-shadow-sm/50 rounded-2xl overflow-hidden "> | |
| <div class="perilla left-[0.2em] absolute top-[0.1em] h-[1.4em] w-[1.4em] bg-gray-500 shadow-md/90 rounded-2xl transition-all duration-200"></div> | |
| </div> | |
| </label> | |
| <input type="checkbox" class="hidden check" name="conBebida2L" id="bebida2l"> | |
| <label class="grid grid-cols-[1.5fr_0.5fr_1fr]" for="bebida2l"> | |
| <span class="pr-[1em] font-bold pl-[1em]">Con Bebida de 2L: </span> | |
| <div class="abertura top-[0.05em] relative h-[1.6em] w-[3em] bg-gray-400 inset-shadow-sm/50 rounded-2xl overflow-hidden "> | |
| <div class="perilla left-[0.2em] absolute top-[0.1em] h-[1.4em] w-[1.4em] bg-gray-500 shadow-md/90 rounded-2xl transition-all duration-200"></div> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment