wagtail/client/scss/elements/_forms.scss

@use "sass:map";
// These are the generic stylings for forms of any type.
// If you're styling something specific to the page editing interface,
// it probably ought to go in layouts/page-editor.scss
form {
    ul,

    li {
        list-style-type: none;
    }

    ul {
        margin: 0;
        padding: 0;
    }
}

fieldset {
    border: 0;
    padding: 0 0 2em;
    margin: 0;
}

legend {
    @include visuallyhidden();
}

label,
.label {
    text-transform: none;
    font-weight: bold;
    color: $color-grey-1;
    font-size: 1.1em;
    display: block;
    padding: 0 0 0.8em;
    margin: 0;
    line-height: 1.3em;

    .checkbox &,
    .radio & {
        display: inline;
    }

    &.no-float {
        float: none;
    }

    &.disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    @include media-breakpoint-up(sm) {
        @include column(2);
        padding-top: 1.2em;
        padding-left: 0;

        .radio_select &,
        .multiple_choice_field &,
        .model_multiple_choice_field &,
        .checkbox_select_multiple &,
        .boolean_field &,
        .model_choice_field &,
        .image_field & {
            padding-top: 0;
        }

        // Horrid specificity war
        .model_choice_field.select & {
            padding-top: 1.2em;
        }
    }
}

input:not([type=submit]),
textarea,
select,
.halloeditor,
.tagit {
    appearance: none;
    box-sizing: border-box;
    border-radius: 6px;
    width: 100%;
    font-family: $font-sans;
    border: 1px solid $color-input-border;
    padding: 0.9em 1.2em;
    background-color: $color-fieldset-hover;
    color: $color-text-input;
    font-size: 1.2em;
    font-weight: 300;

    &:hover {
        background-color: $color-white;
    }

    &:focus {
        background-color: $color-input-focus;
        border-color: $color-input-focus-border;
    }

    &:disabled,
    &[disabled],
    &:disabled:hover,
    &[disabled]:hover {
        background-color: $color-grey-4;
        cursor: not-allowed;
        color: $color-grey-2;
    }
}

@media (forced-colors: $media-forced-colours) {
    .tagit,
    .field-content .tagit .tagit-choice,
    .tagit .tagit-new .ui-widget-content {
        box-shadow: inset 1000px 0 0 0 $color-black;
        color: $color-white;
        forced-color-adjust: none;
    }

    .tagit span.tagit-label:before,
    .tagit span.tagit-label {
        color: $color-black;
        forced-color-adjust: none;
    }
}

// Reset the arrow on `<select>`s in IE10+.
select::-ms-expand {
    display: none;
}

.file_field {
    .input {
        label {
            float: none;
            display: inline;
            padding: 0;
        }

        input[type=checkbox] {
            margin-top: 5px;
        }

        a {
            &:after {
                content: ' ';
                display: block;
            }
        }
    }
}


// radio and check boxes
input[type=radio],
input[type=checkbox] {
    border-radius: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}

input[type=radio] {
    height: 12px;
    width: auto;
    position: relative;
    margin-right: 27px;
}

input[type=radio]:before {
    border-radius: 100%;
    font-family: $font-wagtail-icons;
    font-style: normal;
    text-align: center;
    position: absolute;
    top: -5px;
    left: -2px;
    cursor: pointer;
    display: block;
    content: map.get($icons, 'radio-full');
    width: 1em;
    height: 1em;
    line-height: 1.1em;
    padding: 4px;
    background-color: $color-white;
    color: $color-grey-4;
    border: 1px solid $color-grey-4;
}

input[type=radio]:checked:before {
    content: map.get($icons, 'radio-full');
    color: $color-teal;
}

input[type=checkbox] {
    height: 12px;
    width: 22px;
    position: relative;
    margin-right: 5px;
}

input[type=checkbox]:before {
    font-family: $font-wagtail-icons;
    font-style: normal;
    text-align: center;
    position: absolute;
    top: -5px;
    cursor: pointer;
    display: block;
    content: '';
    line-height: 20px;
    width: 20px;
    height: 20px;
    background-color: $color-white;
    border: 1px solid $color-grey-4;
    color: $color-teal;
}

input[type=checkbox]:checked:before {
    content: map.get($icons, 'tick');
}

input[type=checkbox][disabled]:before {
    cursor: not-allowed;
}


// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
input[type=submit],
input[type=reset],
input[type=button],
button {
    padding: 0 1em;

    @include media-breakpoint-up(sm) {
        &.button-small {
            height: 2em;
        }
    }
}

// Transitions
fieldset,
input,
textarea,
select {
    @include transition(background-color 0.2s ease);
}