개요

이 글은 CSS를 사용하여 팔꿈치 버튼 (또는 스위치) 만 만듭니다.설계는 다음과 같다.

스위치 부분은 복선상자로 만들고, 원형 단추는':after'와':before'위조 요소로 만듭니다.완성하고 찾아보니 Qiita에 같은 투고가 많은데 열심히 만들었기 때문에 공양을 해야 돼요.

소스 코드

HTML

<label
    ><input type="checkbox" checked
    ><span>ON</span
    ><span>OFF</span
></label>

CSS

/* ---- 共通部 ---- */
input[type=checkbox] {
    display: none;
}
label>input[type=checkbox]~span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90px;
    height: 28px;
    font-size: 14px;
    border-style: none;
    border-radius: 15px; // =(丸ボタンのサイズ÷2)+(丸ボタンのmargin)
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

/* ---- スイッチがONのとき ---- */
label>input[type=checkbox]:checked+span {
    display: flex;

    /* ---- ボタンのデザイン ---- */
    padding-left: 8px;
    color: white;
    background-color: dodgerblue;
}
label>input[type=checkbox]:checked+span+span {
    display: none;
}

/* ---- スイッチがOFFのとき ---- */
label>input[type=checkbox]+span {
    display: none;
}
label>input[type=checkbox]+span+span {
    display: flex;

    /* ---- ボタンのデザイン ---- */
    padding-right: 8px;
    color: gray;
    background-color: lightgray;
}

/* ---- 丸ボタンのデザイン ---- */
label>input[type=checkbox]:checked+span::after, label>input[type=checkbox]+span+span::before {
    display: block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 3px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    content: "";
}