checkbox 디자인을 바꿀 때 자주 사용하는 css

예전부터 신경 썼던 젠은 처음 써봤다.

checkbox 디자인을 변경할 때 자주 사용하는 css

체크박스 디자인을 변경할 때 자주 사용하는 css라는 간단한 문제를 선택해 봤습니다.

checkbox의)

checkbox

<label class="checkbox-name">
  <input />
  <span class="checkbox-name-icon">★</span>
  文字
</label>

vue-fontawesome를 사용할 때는 다음과 같은 형식입니다.
checkbox

<label class="checkbox-name">
  <input />
  <span class="checkbox-name-icon">
    <fa :icon="['fas', 'check']" size="2x"/>
  </span>
  文字
</label>

이제 배경을 어떻게 할까?표시만 색칠을 할지, 아니면 문자를 포함해서 단추를 할지.
checkbox

/*マークだけ*/
.checkbox-name span {
  background-color: #f6f4e9;
}
/*文字を含める*/
.checkbox-name {
  background-color: #f6f4e9;
}

기본적인 틀만 있으면 나머지는 장식이고 간단하다.

기본 확인란 취소

사라진 후에도 괜찮지만, 디자인의 기본 아이디어는 안드로이드, iOS, PC 등에서 사용하는 기본 복선상자가 사라지는 것이다.
checkbox

.checkbox-name input[type='checkbox-name'] {
  opacity: 0;
  position: absolute;
}

absolute는 사라지지만 이상한 곳에서 판정받지 않도록 위치 조정을 해야 한다.
나머지는 자신의 취향에 따라 복선상자를 디자인하는 것이다.
checkbox

.checkbox-name-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #f6f4e9;
  border-radius: 10px;
}

체크시 CSS

전체 색상을 변경하려면 확인란을 선택합니다.
checkbox

.checkbox input:checked ~ .checkbox-name-icon {
  background-color: #323232;
}

CSS는 ~(턱 문자)를 통해 연결할 수 있습니다.
CSS는 같은 레이어에 있는 후면 요소에 적용할 수 있습니다.input 탭 뒤에 있는 모든 div에 적용됩니다.앞의 div에는 적용되지 않습니다.

정과 턱화부의 차이

턱화부 외에도 가산점이 있는데 턱화부와 가호의 차이는 복선상자가 효과가 없는 범위가 다르다는 데 있다.
checkbox

input:checked + .icon

+ 동일한 레이어 뒤에 있는 요소입니다.
checkbox

input:checked ~ .icon

~는 같은 층의 모든 요소이다.

부모 요소와 같은 층의 하위 요소

같은 층의 하위 요소라면 지정할 수 있을 것 같습니다.같은 층을 지정하고 하위 요소에 직접 기록합니다.
checkbox

.checkbox input:checked + .same .child-icon

상위 요소(아이부터 부모까지) CSS4의:has가 있는 것 같지만, 대응하는 브라우저가 없기 때문에 사용할 수 없습니다.

잘못된 CSS

input이 잘못되었을 때 아이콘 색깔이 변하는 견본입니다.cursor: not-allowed;커서가 잘못되었습니다. 검증할 때 알림을 표시합니다.
checkbox

.checkbox input:disabled + .checkbox-name-icon {
  color: #fff;
  cursor: not-allowed;
} 

애니메이션 검사 아이콘

표시 및 숨기기가 아니라 보다 원활한 Scle 애니메이션입니다.
checkbox

.checkbox-name-icon svg {
  transition: 0.3s cubic-bezier(1, 0, 0, 1) 0.3s;
  transform: scale(0) rotateZ(180deg);
}

input[type='checkbox']:checked ~ .checkbox-name-icon svg {
  transform: scale(1) rotateZ(0deg);
}

만약 vue라면 이렇게 쓰는 방법이 되었지만, 의심 요소로 대응한다면 쓰는 방법은 다소 다르다.
검사할 때,class는 부모를 지정할 수 없음을 지정합니다.체크박스-name-icon으로 조정하는 것이 포인트입니다.

Bootstrap 사용 안 함

개인적인 의견은 이렇다.경험에 따르면 신경 쓰는 일을 하려면 부츠트랩이 없어진다.샘플을 찾으면 대부분 Bootstrap(vuetify,bootstrapvue)을 사용하지 않기 때문이다.
못 할 일은 없지만 추가 노력이 필요할 것 같아요.
zen은 사용하기 편하고 좋아하지만, 스크랩적인 졸문은 현재 블로그에 쓰여 있다.css,vue,firebase 등의 보도가 있습니다.
참고가 됐으면 좋겠어요.