비활성화(disabled) input 체크박스 CSS 적용하는 방법 (Feat. SCSS)

기존 체크박스, 체크되었을 때 체크박스, 비활성화일때 체크박스의 CSS가 전부 다른 상황이었다.

기존 체크박스와 체크되었을 때는 여기를 참고하여 쉽게 작성을 했지만, disabled는 css가 먹히지 않는 상황!

@import "../../../asset/css/_variable.scss";

input[type="checkbox"] {
  &#check-box {
    display: none;
    + label {
      cursor: pointer;
      /* 기본 */
      &::before {
    	/* 생략 */
      }
    }
    /* 체크했을 때 */
    &:checked {
      + label::before {
		/* 생략 */
      }
    }
/* 여기 안됨!!!!!!! */
    &:disabled {
      content: "";
      background-color: red;
      border-color: red;
    }
  }
}

/* 여기도 안됨!!!!!!! */
input[type="checkbox"][disabled] {
  background-color: #9999;
}

 

 

삽질 살짝 하다가..^^; 오늘도 역시나 스택오버플로우에서 답을 찾았다!ㅎㅎ

https://stackoverflow.com/questions/4271463/how-to-style-a-disabled-checkbox

How to style a disabled checkbox?

기본 박스와 체크된 박스 모두 '기존'의 체크박스를 없애고 새로 만든 것이므로

disabled의 css 또한 기존의 체크박스에 css를 먹이는게 아니라, 새로 만든(:before로) 박스에 css를 변경해야하는 것이었다.

내가 적은 코드는 기존의 체크박스의 css를 변경하고 있었던 셈이다!

 

 

/* SCSS */
@import "../../../asset/css/_variable.scss";

input[type="checkbox"] {
  &#check-box {
    display: none;
    /* disabled!!!!! */
    &:disabled {
      + label {
        &::before {
          content: "";
          border: 0.5px solid $light-2;
        }
      }
    }
    + label {
      cursor: pointer;
      /* 기본 */
      &::before {
        content: "";
        display: inline-block;
        width: 17px;
        height: 17px;
        border: 0.5px solid $light;
        vertical-align: middle;
      }
    }
    /* 체크했을때 */
    &:checked {
      + label::before {
        content: "";
        border-color: $primary;
        background-image: url("../../../asset/images/checked.svg");
        background-repeat: no-repeat;
        background-position: 50%;
      }
    }
    }
  }
}

 

완성!!

CSS 파일 확인은 아래에서!

/* CSS */

input[type=checkbox]#check-box {
  display: none;
}
input[type=checkbox]#check-box:disabled + label::before {
  content: "";
  border: 0.5px solid #ddd;
}
input[type=checkbox]#check-box + label {
  cursor: pointer;
}
input[type=checkbox]#check-box + label::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 0.5px solid #bbb;
  vertical-align: middle;
}
input[type=checkbox]#check-box:checked + label::before {
  content: "";
  border-color: #2b87ec;
  background-image: url("../../../asset/images/checked.svg");
  background-repeat: no-repeat;
  background-position: 50%;
}
input[type=checkbox]#check-box:disabled {
  content: "";
  background-color: red;
  border-color: red;
}

input[type=checkbox][disabled] {
  background-color: rgba(153, 153, 153, 0.6);
}/*# sourceMappingURL=checkbox.css.map */