Modern CSS Demos

Loading ...

:root {
    --highlight-color: #689f38;
    --text-color: #ffffff;

--link-color: color-mix(in srgb, var(--highlight-color), var(--demo-color));
    --link-hover-color: color-mix(in srgb, var(--highlight-color), var(--demo-color) 25%);
    --link-focus-color: color-mix(in srgb, var(--highlight-color), var(--demo-color) 0%);

--input-color: var(--demo-color);
    --input-bg: var(--demo-bg);
    --input-border-color: color-mix(in srgb, var(--demo-color), var(--demo-bg));
    --input-hover-border-color: color-mix(in srgb, var(--highlight-color), var(--input-border-color));
    --input-focus-border-color: var(--highlight-color);
}

*:focus {
    --input-border-color: var(--input-focus-border-color);
    z-index: 1;
    outline: 0;
}

a {
    color: var(--link-color);
}
a:hover {
    --link-color: var(--link-hover-color);
}
a:focus {
    --link-color: var(--link-focus-color);
}

label {
    cursor: pointer;
}

button,
input,
textarea,
select {
    display: inline-block;
    accent-color: var(--highlight-color);
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    color: var(--input-color);
    background-color: var(--input-bg);
    border: 2px solid var(--input-border-color);
    border-radius: .25rem;
    padding: .5rem .75rem;
    margin: 0;
}
input[type="text"],
input[type="range"],
textarea,
select {
    display: block;
    width: 100%;
}
button:hover,
input:hover,
textarea:hover,
select:hover {
    --input-border-color: var(--input-hover-border-color);
}
button:focus,
input:focus,
textarea:focus,
select:focus {
    --input-border-color: var(--input-focus-border-color);
}

.focus-normal a:focus,
.focus-normal button:focus,
.focus-normal input:focus,
.focus-normal textarea:focus,
.focus-normal select:focus {
    box-shadow:
        0 0 0 2px black,
        0 0 0 4px white
    ;
}

.focus-visible a:focus-visible,
.focus-visible button:focus-visible,
.focus-visible input:focus-visible,
.focus-visible textarea:focus-visible,
.focus-visible select:focus-visible {
    box-shadow:
        0 0 0 2px black,
        0 0 0 4px white
    ;
}

.focus-demo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 900px;
    margin: 0 auto;
    gap: 2rem;
}

.focus-demo > div {
    display: grid;
    gap: 1rem;
}

<div class="focus-demo">
    <div class="focus-none">
        <div class="focus-section">
            <strong>None</strong>
        </div>                <div class="focus-section">
            <p style="margin-bottom: 0;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nulla odio ex, <a href="#">vitae mattis eget</a>, lobortis in ligula.
                Pellentesque finibus congue vulputate.
            </p>
        </div>
        <div class="focus-section">
            <input type="text">
        </div>
        <div class="focus-section">
            <div class="form-check">
                <label for="checkbox_690086496_1">
                    <input id="checkbox_690086496_1" name="checkbox_690086496" type="checkbox" checked="checked" />
                    Checkbox 1
                </label>
            </div>
            <div class="form-check">
                <label for="checkbox_690086496_2">
                    <input id="checkbox_690086496_2" name="checkbox_690086496" type="checkbox" />
                    Checkbox 2
                </label>
            </div>
        </div>
        <div class="focus-section">
            <div class="form-check">
                <label for="radio_690086496_1">
                    <input id="radio_690086496_1" name="radio_690086496" type="radio" checked="checked">
                    Radio 1
                </label>
            </div>
            <div class="form-check">
                <label for="radio_690086496_2">
                    <input id="radio_690086496_2" name="radio_690086496" type="radio">
                    Radio 2
                </label>
            </div>
        </div>
        <div class="focus-section">
            <input type="range" min="1" max="100" value="50" id="demo-preview-control" step="1">
        </div>
        <div class="focus-section">
            <textarea></textarea>
        </div>
        <div class="focus-section">
            <select name="pets">
                <option value=""></option>
                <option value="dog">Dog</option>
                <option value="cat">Cat</option>
                <option value="hamster">Hamster</option>
                <option value="parrot">Parrot</option>
                <option value="spider">Spider</option>
                <option value="goldfish">Goldfish</option>
            </select>
        </div>
        <div class="focus-section">
            <button type="button">Demo</button>
        </div>

</div>
    <div class="focus-normal">
        <div class="focus-section">
            <strong>Normal</strong>
        </div>                <div class="focus-section">
            <p style="margin-bottom: 0;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nulla odio ex, <a href="#">vitae mattis eget</a>, lobortis in ligula.
                Pellentesque finibus congue vulputate.
            </p>
        </div>
        <div class="focus-section">
            <input type="text">
        </div>
        <div class="focus-section">
            <div class="form-check">
                <label for="checkbox_1741488965_1">
                    <input id="checkbox_1741488965_1" name="checkbox_1741488965" type="checkbox" checked="checked" />
                    Checkbox 1
                </label>
            </div>
            <div class="form-check">
                <label for="checkbox_1741488965_2">
                    <input id="checkbox_1741488965_2" name="checkbox_1741488965" type="checkbox" />
                    Checkbox 2
                </label>
            </div>
        </div>
        <div class="focus-section">
            <div class="form-check">
                <label for="radio_1741488965_1">
                    <input id="radio_1741488965_1" name="radio_1741488965" type="radio" checked="checked">
                    Radio 1
                </label>
            </div>
            <div class="form-check">
                <label for="radio_1741488965_2">
                    <input id="radio_1741488965_2" name="radio_1741488965" type="radio">
                    Radio 2
                </label>
            </div>
        </div>
        <div class="focus-section">
            <input type="range" min="1" max="100" value="50" id="demo-preview-control" step="1">
        </div>
        <div class="focus-section">
            <textarea></textarea>
        </div>
        <div class="focus-section">
            <select name="pets">
                <option value=""></option>
                <option value="dog">Dog</option>
                <option value="cat">Cat</option>
                <option value="hamster">Hamster</option>
                <option value="parrot">Parrot</option>
                <option value="spider">Spider</option>
                <option value="goldfish">Goldfish</option>
            </select>
        </div>
        <div class="focus-section">
            <button type="button">Demo</button>
        </div>

</div>
    <div class="focus-visible">
        <div class="focus-section">
            <strong>Visible</strong>
        </div>                <div class="focus-section">
            <p style="margin-bottom: 0;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nulla odio ex, <a href="#">vitae mattis eget</a>, lobortis in ligula.
                Pellentesque finibus congue vulputate.
            </p>
        </div>
        <div class="focus-section">
            <input type="text">
        </div>
        <div class="focus-section">
            <div class="form-check">
                <label for="checkbox_1300021345_1">
                    <input id="checkbox_1300021345_1" name="checkbox_1300021345" type="checkbox" checked="checked" />
                    Checkbox 1
                </label>
            </div>
            <div class="form-check">
                <label for="checkbox_1300021345_2">
                    <input id="checkbox_1300021345_2" name="checkbox_1300021345" type="checkbox" />
                    Checkbox 2
                </label>
            </div>
        </div>
        <div class="focus-section">
            <div class="form-check">
                <label for="radio_1300021345_1">
                    <input id="radio_1300021345_1" name="radio_1300021345" type="radio" checked="checked">
                    Radio 1
                </label>
            </div>
            <div class="form-check">
                <label for="radio_1300021345_2">
                    <input id="radio_1300021345_2" name="radio_1300021345" type="radio">
                    Radio 2
                </label>
            </div>
        </div>
        <div class="focus-section">
            <input type="range" min="1" max="100" value="50" id="demo-preview-control" step="1">
        </div>
        <div class="focus-section">
            <textarea></textarea>
        </div>
        <div class="focus-section">
            <select name="pets">
                <option value=""></option>
                <option value="dog">Dog</option>
                <option value="cat">Cat</option>
                <option value="hamster">Hamster</option>
                <option value="parrot">Parrot</option>
                <option value="spider">Spider</option>
                <option value="goldfish">Goldfish</option>
            </select>
        </div>
        <div class="focus-section">
            <button type="button">Demo</button>
        </div>

</div>
</div>

Zoom

Document

Container