【지금부터 종사한다】Sass로 간단 form의 css(checkbox·radio·select)

막상 만들려고 하면 귀찮은 반응형 form의 Sass를 공개합니다.

▼오늘, 작성하는 것
・라디오 버튼
· 체크 박스
・셀렉트 박스


form.html

<dl class="form-area">
    <dt>ラジオボタン</dt>
    <dd>
        <label class="label-radio"><input class="form-radio" type="radio" name="radio1">ラジオ01</label>
        <label class="label-radio"><input class="form-radio" type="radio" name="radio1">ラジオ02</label>
    </dd>
    <dt>ラジオボタン</dt>
    <dd>
        <label class="label-radio"><input class="form-radio" type="radio" name="radio2">ラジオ01</label>
        <label class="label-radio"><input class="form-radio" type="radio" name="radio2">ラジオ02</label>
    </dd>
    <dt>チェックボックス</dt>
    <dd>
        <label class="label-checkbox"><input class="form-checkbox" type="checkbox" name="">ラジオ01</label>
        <label class="label-checkbox"><input class="form-checkbox" type="checkbox" name="">ラジオ02</label>
    </dd>
    <dt>セレクトボックス</dt>
    <dd>
        <div class="form-select-area">
            <select class="form-select" required>
                <option value="" hidden>選択してください</option>
                <option value="1">項目１</option>
                <option value="2">項目２</option>
                <option value="3">項目３</option>
                <option value="4">項目４</option>
            </select>
        </div>
    </dd>
</dl>

form.scss

/**
 * メディアクエリ
 */
$mq: 768px;

@mixin mq {
  @media (max-width: ($mq)) {
    @content;
  }
}

.form-area {
    display: flex;
    flex-wrap: wrap;
    > *:nth-child(odd) {
        width: 20%;
        margin-bottom: 1em;
        @include mq {
            width: 100%;
        }
    }
    > *:nth-child(even) {
        width: 80%;
        margin-bottom: 1em;
        @include mq {
            width: 100%;
        }
    }
}

form-check.scss

/* checkbox */

$input-color: blue;

.form-checkbox {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    margin-right: 5px;
    width: 15px;
    height: 20px;
    cursor: pointer;
    transition: all 0.15s ease-out 0s;
    color: #fff;
    border: none;
    outline: none;
    appearance: none;

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #999;
    }

    &:checked::after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 11px;
        height: 11px;
        background: $input-color;
    }
}

.label-checkbox+.label-checkbox {
    margin-left: 16px;
}

form-radio.scss

/* radio */

$input-color: blue;

.form-radio {
    @extend .form-checkbox;

    &::before {
        border-radius: 50%;
    }

    &:checked::after {
        border-radius: 50%;
    }
}

.label-radio+.label-radio {
    margin-left: 16px;
}

form-select.scss

/* select */

$input-color: blue;

.form-select-area {
    width: 200px;
    position: relative;
    border: 1px solid #bbbbbb;
    border-radius: 2px;
    background: #ffffff;

    &::before {
        content: '';
        position: absolute;
        top: 0.8em;
        right: 0.9em;
        width: 0;
        height: 0;
        padding: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #666666;
        pointer-events: none;
    }

    .form-select {
        width: 100%;
        padding-right: 1em;
        cursor: pointer;
        text-indent: 0.01px;
        text-overflow: ellipsis;
        border: none;
        outline: none;
        background: transparent;
        background-image: none;
        box-shadow: none;
        appearance: none;
        padding: 8px 38px 8px 8px;
        color: #666666;
        &::-ms-expand {
            display: none;
        }
    }
}