Live
x
<div class="wrapper"> <form action=""> <fieldset> <legend>Accent-color Demo</legend> <label> Strawberries <input type="checkbox" id="berries_1" value="strawberries"> </label> <label> Radio Buttons <div> <input type="radio" name="accented-demo" checked> <input type="radio" name="accented-demo"> <input type="radio" name="accented-demo"> </div> </label> <label> Range Slider <input type="range"> </label> <label> Progress element <progress max="100" value="50">50%</progress> </label> </fieldset> </form></div>
Live
xxxxxxxxxx64
* { box-sizing: border-box;}:root { --brand: rgba(250, 15, 117, 1); accent-color: var(--brand);}@media (prefers-color-scheme: dark) { :root { --brand: rgba(3, 169, 244, 1); } body { background: #000; color: #fff; }}body { font-family: "Open Sans", sans-serif; min-height: 100vh; display: grid; place-items: center; color-scheme: light dark;}.wrapper { width: 100%; max-width: 35rem;}fieldset { border: 1px solid var(--brand, #000);}legend { font-weight: 700; color: var(--brand, #000);}fieldset > * + * { margin-top: 0.5rem;}.form__group { display: flex; align-items: center;}input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin-right: 0.65rem;}label { display: flex; align-items: center; justify-content: space-between; gap: 4rem;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.