집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 및 HTML을 사용하여 체크박스 효과를 사용자 정의하는 방법

CSS 및 HTML을 사용하여 체크박스 효과를 사용자 정의하는 방법

不言원래의: 2018-06-20 10:11:391503검색

체크박스는 좀 더 일반적으로 사용되는 HTML 기능이어야 하지만, 브라우저와 함께 제공되는 체크박스는 보기에 좋지 않은 경우가 많으며 브라우저마다 효과가 다릅니다. 아래에서는 CSS+HTML 사용자 정의 체크박스의 효과를 공유하겠습니다. , 살펴보겠습니다

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

구현 아이디어

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

기본 입력을 숨기고 스타일 정의 프로세스를 라벨에 맡깁니다(그렇다면 체크박스의 스타일을 직접 변경하면 어떨까요? 체크박스는 브라우저의 기본 구성 요소이기 때문에 스타일 변경은 라벨만큼 편리하지 않으며, 체크박스의 많은 속성은 배경과 같이 작동하지 않으며 라벨은 기본적으로 스타일에서 p와 동일합니다( "당신의 자비")
그리고 선택 이벤트에서는 "인접 선택기( E+F)"를 CSS로 사용하면 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=&#39;checkbox&#39;] {
  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=&#39;checkbox&#39;]: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 및 HTML을 사용하여 체크박스 효과를 사용자 정의하는 방법

관련 기사