settings.css

body {
    display: grid;
    grid-template-columns: auto auto;
    grid-row-gap: 0.4em;

    align-items: center;
    padding: 10px 1em;
}

label {
    grid-column: 1;
}

input, textarea, select, .select-wrapper {
    grid-column: 2;
}

textarea {
    line-height: inherit;
    font-family: inherit;
    outline: none;
    overflow: scroll;
    resize: none;

    border: 1px solid var(--highlight);
    border-radius: 5px;
}

select {
    appearance: none;

    border: 1px solid var(--highlight);
    border-radius: 5px;

    background-color: var(--bg);
    padding: 1px 0.75ch;

    width: 100%;
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: "▼";
    font-size: 1rem;
    right: 10px;
    position: absolute;
}

input[type="number"] {
    appearance: none;
    border: 1px solid var(--highlight);
    border-radius: 5px;
    padding: 1px 0.75ch;
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 1em;
    height: 1em;
    border: 1px solid var(--highlight);
    border-radius: 5px;
    /* Adjusts the position of the checkboxes on the text baseline */
    vertical-align: -2px;
    background: linear-gradient(45deg, var(--bg) 50%, var(--highlight) 50%) left bottom;
    background-size: 400% 100%;
    transition: 0.25s;
}

input[type="checkbox"]:checked {
    background-position: right bottom;
}

input[type="checkbox"]::before {
    content: "✔";
    position: absolute;
    font-size: 1.2em;
    color: var(--bg);
    top: -0.2em;
}