Help us understand the problem. What is going on with this article?

checkboxをカスタマイズしたい

More than 1 year has passed since last update.

html

<div class="checkBox">
    <input type="checkbox" id="hoge">
    <label for="hoge">
        ラベル
    </label>
</div>

SCSS

.checkbox {

    & input[type='checkbox'] {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        position: relative;
        cursor: pointer;

        appearance: none;
        outline: none;

        width: 20px;
        height: 20px;
        margin: 0;

    }

    // チェックボックスのデザイン
    & input[type='checkbox']::before {
        display: inline-block;
        content: '';
        width: 20px;
        height: 20px;
        background: #fff;
        border: solid 1px $gray-400;
        border-radius: 3px;
        margin: 0;
    }

    // チェックマークのデザイン
    & input[type='checkbox']::after {
        display: inline-block;
        content: '';
        position: absolute;
        left: 7px;
        top: 0px;

        width: 8px;
        height: 16px;
        border-right: 3px solid $main;
        border-bottom: 3px solid $main;
        transform: rotate(45deg);

        // チェックしてないときは隠す
        opacity: 0;
    }

    // チェックするとチェックマークの透明化を解除
    & input[type='checkbox']:checked::after {
        opacity: 1;
    }

    & label {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;

        line-height: 20px;
        height: 20px;
        margin: 0;
        // margin-left: 4px;
    }
}
pe-ta
全然わからない。俺は雰囲気でコードを書いている。 座右の銘:もっと真剣にふざけたい。
codmon
保育園・幼稚園向け業務支援システム「コドモン」の開発・運営を手がける会社です。
https://www.wantedly.com/companies/codmon
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away