HTML의 체크박스 사용자 정의 효과 예

체크박스는 상대적으로 일반적인 HTML 기능이어야 하지만, 브라우저와 함께 제공되는 체크박스는 보기에 좋지 않은 경우가 많으며 브라우저마다 효과가 다릅니다. 시각적 효과를 미화하고 통일할 필요성에서 체크박스의 사용자 정의를 제안했습니다. 구현 방법을 요약하면 다음과 같습니다.

구현 아이디어

순수한 CSS 구현의 주요 수단은 label 태그의 시뮬레이션 기능을 사용하는 것입니다. input 자체가 표시되지 않더라도 label의 for 속성은 특정 input 요소와 연결될 수 있습니다. 이에 해당하는 label을 생성한 후 사용자는 label 태그와 상호작용하여 기본 입력을 직접 대체할 수 있습니다. 시뮬레이션이 공간을 남겨두는 스타일을 제공합니다. 즉, label标签的模拟功能。label的for属性可以关联一个具体的input元素，即使这个input本身不可被用户可见，有个与它对应的label后，用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是

隐藏原生input，样式定义的过程留给label （那为什么不直接改变checkbox的样式？因为checkbox作为浏览器默认组件，样式更改上并没有label那么方便，很多属性对checkbox都是不起作用的，比如background,而label在样式上基本和div一样'任人宰割')

而在选择事件上，由于css的“相邻选择符(E+F)”的存在，让我们可以直接利用html的默认checkbox，免去了js模拟选择的麻烦。

demo

DEMO的部分CSS3属性只写了webkit前缀，所以建议用webkit内核的浏览器查看本页
HTML代码：

<div 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不了解的新人可能这时候第一反应就是在label后面用p标签或者span标签来添加文字。不过这种方式都不怎么优雅。个人建议用css的::before和::after伪元素（::before和:before是一个东西。不过为了把“伪元素”和“伪类”区分出来，W3C建议的写法是伪元素用::而伪类用:）
伪元素的具体内容这里不多说，(其实是我也对它们的掌握就仅限于用用而已，对这个谈不上理解，就不误人子弟了)

/* 伪元素的生效很简单，定义`content`就好，其余的属性和普通div一样 */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模拟label的文字，那也就可以用::before模拟label

기본 입력을 숨기고 스타일 정의 프로세스를 label에 남겨둡니다(그렇다면 체크박스의 스타일을 직접 변경하는 것은 어떨까요? 체크박스는 브라우저의 기본 구성 요소이기 때문에 스타일 변경사항은 라벨만큼 편리하지 않습니다. 배경과 같은 많은 속성이 체크박스에 영향을 미치지 않으며 레이블은 기본적으로 동일합니다. as div in style')🎜

🎜선택 이벤트에서는 CSS의 "인접 선택기(E+F)"가 있기 때문에 html의 기본 체크박스를 직접 사용할 수 있습니다. js 시뮬레이션 선택 문제가 필요합니다. 🎜🎜demo🎜🎜DEMO의 일부 CSS3 속성에는 웹킷 접두어만 있으므로 이 페이지를 보려면 웹킷 코어가 있는 브라우저를 사용하는 것이 좋습니다.
HTML 코드: 🎜

rrreee

🎜HTML 구성이 완료되었습니다. 다음은 해당 CSS입니다. 🎜

rrreee

🎜위 코드의 효과는 다음과 같으니 괜찮은 것 같습니다. 🎜🎜하지만 곰곰이 생각해 보면 뭔가 빠진 것 같습니다. 옵션에 해당하는 프롬프트 텍스트
CSS를 모르는 초보자는 이때 처음에 에 반응할 수도 있습니다. >label텍스트를 추가하려면 나중에 p 태그 또는 span 태그를 사용하세요. 그러나 이 접근 방식은 그다지 우아하지 않습니다. 개인적으로 저는 CSS의 ::before 및 ::after 의사 요소(::before 및 :before)를 사용하는 것을 권장합니다. > 그러나 "의사 요소"와 "의사 클래스"를 구별하기 위해 W3C에서 권장하는 작성 방법은 의사 요소에 ::를 사용하고 :를 사용하는 것입니다. > 의사 클래스의 경우)
여기에서는 의사 요소의 구체적인 내용에 대해 자세히 설명하지 않겠습니다. 다른 사람을 오해하지 마세요)🎜

rrreee

🎜물론 ::after를 사용하여 라벨 텍스트를 시뮬레이션할 수 있으므로 ::를 사용할 수도 있습니다. <code>label을 시뮬레이션하기 위한 before 체크박스 스타일은 여기에서 분석되지 않습니다. 🎜

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