CSS

input selector 작성할 때

input[type = "text"]{
...
}

underline

text-decoration: underline;

checkbox 커스터마이징

HTML

<input type = "checkbox" id = "keep_login"/>
<label htmlFor = "keep_login" id = "custom_checkbox">로그인 상태 유지할래요</label>

• input의 id와 label의 for로 맞춰주기
• react에서는 htmlFor로 작동

CSS

input[type = "checkbox"]{
display: none;
}

input[type = "checkbox"] {
  display: none;
  &:checked ~ #custom_checkbox  {
    color: $primary_pink;
    &:before {
      content: '\2713';
      color: white;
      background-color: $primary_pink;
      border-color: white;
    }
  }
}

#custom_checkbox {
  cursor: pointer;
  @include flex_set_center;
  &:before {
    content: '';
    display: inline-block;
    width : 18px;
    height : 18px;
    line-height: 18px;
    text-align: center;
    border: 1px solid $light_gray;
    margin-right: 10px;
    border-radius: 3px;
  }
}

• checkbox input 자체를 display: none;으로 없애주기
• label before로 빈 box 만들기
• checkbox checked 유무로 label과 before box 커스터마이징 하기