CSS 체크박스 효과 사용에 대한 자세한 설명

이번에는 CSS 체크박스 효과 사용법에 대해 자세히 설명하겠습니다. CSS 체크박스 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

구현 아이디어순수한 CSS 구현의 주요 수단은 라벨 태그의 시뮬레이션 기능을 사용하는 것입니다. label의 for 속성은 특정 입력 요소와 연관될 수 있습니다. 입력 자체가 사용자에게 표시되지 않더라도 이에 해당하는 레이블이 있으면 사용자는 레이블 레이블과 상호 작용하여 기본 입력을 직접 대체할 수 있습니다. 이는 스타일 시뮬레이션에 여유 공간을 제공합니다. 즉,

기본 입력을 숨기고 스타일 정의 프로세스를 라벨에 맡깁니다(그렇다면 체크박스의 스타일을 직접 변경하면 어떨까요? 체크박스는 브라우저의 기본 구성 요소이기 때문에 스타일 변경은 라벨만큼 편리하지 않으며,

배경

과 같은 체크박스의 많은 속성은 작동하지 않으며, 라벨은 기본적으로 스타일 측면에서 p와 동일하므로 js 시뮬레이션 선택의 문제를 없애기 위해 html의 기본 체크박스를 직접 사용하겠습니다.

demo

DEMO의 일부 CSS3 속성에는 웹킷 접두어만 있으므로 이 페이지를 보려면 웹킷 코어가 있는 브라우저를 사용하는 것이 좋습니다

HTML 코드:

<p class="wrap">
    <!-- `input`的id必须有，这个是label进行元素匹配所必需的 -->
    <!-- 可以看到每个input的id和label的“for”属性对应同一字符串 -->
<input type="checkbox" id="checkbox01" />
<label for="checkbox01"></label>
<input type="checkbox" id="checkbox02" />
<label for="checkbox02"></label>
<input type="checkbox" id="checkbox03" />
<label for="checkbox03"></label>
<input type="checkbox" id="checkbox04" />
<label for="checkbox04"></label>

HTML 구성이 완료되고 다음 단계는 해당 CSS입니다.

.wrap {
  width: 500px;
  background-color: #EEE;
  border: 2px solid #DEF;
}
/* 隐藏所有checkbox */
input[type='checkbox'] {
  display: none;
}
/* 对label进行模拟.背景图片随便拼凑的，不要吐槽品味*/
/*   transition效果是做个背景切换效果，这里单纯演示而已，实际上这个过渡不加更自然*/
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  background: url(//www.chitanda.me/images/blank.png);
  background-position: 0 0px;
  -webkit-transition: background 0.5s linear;
}
/*  利用相邻选择符和checkbox`:checked`的状态伪类来模拟默认选中效果（就是点击后那个勾号的效果）  */
/*如果这段代码注释，点击后将没有任何反馈给用户*/
/*因为label本身是没有点击后被选中的状态的，checkbox被隐藏后，这个状态只能手动模拟*/
input[type='checkbox']:checked+label {
  background-position: 0 -60px;
}

위 코드의 효과는 다음과 같으니 괜찮은 것 같습니다.

하지만 잘 생각해보면 뭔가 빠진 것 같습니다: 옵션에 해당하는 프롬프트 텍스트

CSS를 모르는 초보자는 이때 먼저 p 태그나 스팬 태그를 사용하여 텍스트를 추가하는 반응을 보일 수도 있습니다. 라벨 뒤에. 그러나 이 접근 방식은 그다지 우아하지 않습니다. 개인적으로 저는 CSS의 ::before 및 ::after 의사 요소를 사용하는 것을 권장합니다(::before 및 :before는 동일합니다. 그러나 "의사 요소"와 "의사 클래스"를 구별하기 위해 W3C에서는 다음과 같이 작성하는 것을 권장합니다. 방법은 의사 요소에 대해 ::를 사용하는 것입니다. 그리고 의사 클래스가 사용됩니다 :)

여기서는 의사 요소의 특정 내용에 대해 자세히 설명하지 않겠습니다(사실 이에 대한 나의 지식은 그 사용으로 제한됩니다. 이해가 안가서 다른 사람을 오해하지 않겠습니다)

/* 伪元素的生效很简单，定义`content`就好，其余的属性和普通p一样 */
label::after {
   content: attr(data-name);
   /*利用attr可以减少css代码量,data-name写在html部分的label属性里*/
  display: inline-block;
  position: relative;
  width: 120px;
  height: 60px;
  left: 100%;
  vertical-align: middle;
  margin: 10px;
}

물론 ::after를 사용하여 라벨의 텍스트를 시뮬레이션할 수 있으므로 ::before를 사용하여 라벨의 체크박스 스타일을 시뮬레이션할 수도 있습니다. 여기서는 분석하지 않을 라벨입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천도서:

CSS 선택기 사용법에 대한 자세한 설명

CSS 여백의 특수한 사용 기술에 대한 자세한 설명

위 내용은 CSS 체크박스 효과 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!