#1 -webkit-appearance: none

여러 코드를 복붙해서 클래스 이름만 바꿔서 사용하려 했으나
image 그럼 그렇지 잘될리가 없다
이렇게 나오는 코드는 label을 수정한게 아니라 체크박스 자체를 수정한 것이다.

-webkit-appearance: none;을 이용하여 체크박스 자체를 커스텀 한 방법이다.
사용한 코드

input[type="checkbox"] {
    margin: 0;
    -webkit-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    cursor: pointer;
    outline: none !important;
    border: 1px solid #000000;
    border-radius: 2px;
    background: #ffffff;
}
input[type="checkbox"]::before {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: scale(0) translate(-50%, -50%);
    line-height: 1;
}
input[type="checkbox"]:checked {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
}
input[type="checkbox"]:checked::before {
    border-radius: 2px;
    transform: scale(1) translate(-50%, -50%)
}

image 👆 결과


실제로 position: relative를 줘서 사용하려 했으나
그렇게 되면 체크 표시가 이상한 위치에 가서 포기
z-index 혹시 될까 했으나 역시나 안됨


이걸로는 안되니까 label에 내가 직접 값을 줘서 사용하는 편이 낫다..

#2 label 수정

결국 이것도 position 사용하고 아까처럼 체크박스가 nav toggle 위에 올라가서 사용 안함


그냥 기본 checkbox 사용



3. 결론

navbar position을 absolute로 고정시킴
navbar 하단의 section, footer가 밑으로 내려가게 만들어서 적용함..