집 > 기사 > 웹 프론트엔드 > CSS 및 HTML 사용자 정의 체크박스 효과에 대한 자세한 설명

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

小云云원래의: 2017-12-19 10:26:361800검색

체크박스는 상대적으로 일반적인 HTML 기능이어야 하지만, 브라우저와 함께 제공되는 체크박스는 보기에 좋지 않은 경우가 많으며 브라우저마다 효과가 다릅니다. 시각적 효과를 미화하고 통일할 필요성에서 체크박스의 사용자 정의를 제안했습니다. 이 글은 주로 CSS+HTML 사용자 정의 체크박스의 효과를 공유합니다. 도움이 되기를 바랍니다.

구현 아이디어

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

기본 입력을 숨기고 스타일 정의 프로세스를 라벨에 맡깁니다(그렇다면 체크박스의 스타일을 직접 변경하면 어떨까요? 체크박스는 브라우저의 기본 구성 요소이기 때문에 스타일 변경은 라벨만큼 편리하지 않으며, 체크박스의 많은 속성은 배경과 같이 작동하지 않으며 라벨은 스타일 측면에서 기본적으로 p와 동일합니다. 즉 "타인의 자비")
그리고 선택 이벤트에서는 CSS의 "인접 선택기(E+F)", HTML의 기본 확인란을 직접 사용할 수 있으므로 js 시뮬레이션 선택의 문제가 사라집니다.

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를 사용하여 라벨의 체크박스 스타일을 시뮬레이션할 수도 있습니다. 여기서는 분석하지 않을 라벨입니다.

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

관련 기사