input창 꾸미기(feat.코남)

html

        <div class="input-test">
            <label class="check">
                <input type="checkbox" />
                <span class="icon"></span>
            </label>
        </div>

 

scss

.input-test {
    margin-top: 20px;
    border: 1px solid red;

    .check input {
        display: none;
        &:checked ~ .icon {
            border-color: #ff1100;
        }

        &:checked ~ .icon::before {
            height: 50px;
            transition: all 0.35s ease;
        }

        &:checked ~ .icon::after {
            height: 100px;
            transition: all 0.35s ease 0.35s;
        }
    }

    .icon {
        display: inline-block;
        border: 10px solid #000;
        background-color: transparent;
        width: 100px;
        height: 100px;
        position: relative;
        cursor: pointer;

        &::before,
        &::after {
            content: "";
            display: inline-block;
            width: 20px;
            height: 0;
            background-color: #ff1100;
            position: absolute;
            transform-origin: left top;
            border-radius: 5px;
        }

        &::before {
            top: 40px;
            left: 12px;
            transform: rotate(-45deg);
        }

        &::after {
            top: 75px;
            left: 48px;
            transform: rotate(-135deg);
        }
    }
}