Created
February 7, 2026 19:56
-
-
Save flq/04475a55e7d0dbed44bf76b54c412f90 to your computer and use it in GitHub Desktop.
Some HTML with some radio buttons that have been custom styled
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="de"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Radio Button</title> | |
| <style> | |
| :root { | |
| color-scheme: light dark; | |
| } | |
| @property --color { | |
| syntax: "<color>"; | |
| inherits: true; | |
| initial-value: #0066cc; | |
| } | |
| @property --size { | |
| syntax: "<length>"; | |
| inherits: true; | |
| initial-value: 1rem; | |
| } | |
| .flex { | |
| display: flex; | |
| flex-flow: column; | |
| gap: 1rem; | |
| --color: light-dark(rgb(14, 64, 12), rgb(100, 200, 100)); | |
| --size: 2rem; | |
| } | |
| label:has(input[type="radio"]) { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: var(--size); | |
| cursor: pointer; | |
| color: var(--color); | |
| } | |
| input[type="radio"] { | |
| appearance: none; | |
| width: var(--size); | |
| height: var(--size); | |
| border: 2px solid var(--color); | |
| border-radius: 50%; | |
| background-color: light-dark(white, #222); | |
| box-shadow: inset -1px -1px 2px color-mix(in srgb, var(--color), transparent 70%); | |
| cursor: pointer; | |
| margin: 0; | |
| position: relative; | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 23%; | |
| border-radius: 50%; | |
| background: linear-gradient( | |
| 135deg, | |
| color-mix(in srgb, var(--color), black 20%), | |
| color-mix(in srgb, var(--color), white 20%) | |
| ); | |
| box-shadow: outset 1px 1px 2px color-mix(in srgb, var(--color), transparent 70%); | |
| scale: 0; | |
| transition: scale 0.15s ease-out; | |
| } | |
| &:checked::after { | |
| animation: bounce 0.3s ease-out forwards; | |
| } | |
| } | |
| @keyframes bounce { | |
| 0% { scale: 0; } | |
| 60% { scale: 1.3; } | |
| 100% { scale: 1; } | |
| } | |
| button { | |
| border-color: var(--color); | |
| font-size: var(--size); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form | |
| class="flex" | |
| onsubmit=" | |
| event.preventDefault(); | |
| Array.from(new FormData(this).entries()).forEach(([k, v]) => console.log({ k, v })); | |
| " | |
| > | |
| <label> | |
| <input name="beverage" value="coffee" type="radio" required /> | |
| Coffee | |
| </label> | |
| <label> | |
| <input name="beverage" value="tea" type="radio" /> | |
| Tea | |
| </label> | |
| <label> | |
| <input name="food" value="Chicken" type="radio" /> | |
| Chicken | |
| </label> | |
| <label> | |
| <input name="food" value="Feta" type="radio" required /> | |
| Feta | |
| </label> | |
| <div> | |
| <button type="submit">Submit</button> | |
| <button type="reset">Reset</button> | |
| </div> | |
| </form> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was in the aftermath of having read the article "The Incredible Overcomplexity of the Shadcn Radio Button"