CSS+HTML 사용자 정의 checkbox 효과

checkbox는 비교적 자주 사용하는 html 기능일 것이다. 그러나 브라우저가 자체로 가지고 있는 checkbox는 종종 양식이 그다지 예쁘지 않고 브라우저마다 효과도 다르다.시각적 효과를 미화하고 통일시키는 수요 때문에 체크박스의 사용자 정의가 제기되었다.여기에 실현 방법에 대해 총결산을 하다
생각을 실현하다
순수 css 실현의 주요 수단은 label 라벨의 시뮬레이션 기능을 이용하는 것이다.label의 for 속성은 구체적인 input 요소와 연결될 수 있다. 설령 이 input 자체가 사용자에게 보이지 않더라도 그것에 대응하는 label가 있다면 사용자는 label 라벨과 상호작용을 통해 원생input을 대체할 수 있다. 이것은 우리의 스타일 시뮬레이션에 공간을 남겼다.요컨대
원생 input을 숨기고 스타일 정의를 남기는 과정label(그런데 왜 체크박스의 스타일을 직접 바꾸지 않습니까? 체크박스는 브라우저의 기본 구성 요소로서 스타일 변경에 있어서 label처럼 편리하지 않기 때문에 많은 속성이 checkbox에 작용하지 않습니다. 예를 들어 background보다 label양식에 있어서는 기본적으로div와 같은'인재할')
선택 이벤트에 있어서 css의'인접 선택기(E+F)'가 존재하기 때문에 우리는 html의 기본 checkbox를 직접 활용하여 js 아날로그 선택의 번거로움을 없앨 수 있다.
demo
DEMO의 일부 CS3 속성은 웹키 접두사만 쓰여 있으므로 웹키 커널의 브라우저에서 HTML 코드를 보는 것이 좋습니다.

    
    










 
 
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;
}
  
위 코드의 효과는 아래와 같습니다. 보기에도 괜찮을 것 같습니다.http://codepen.io/chitanda/pen/OVjarB/
하지만 자세히 생각해 보면 뭔가 부족한 것 같다. 옵션에 대응하는 힌트 문자가 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;
}
  
결과는 다음과 같습니다.http://codepen.io/chitanda/pen/KpvRWz/
물론 ::after 아날로그 label의 문자를 사용할 수 있다면 ::before 아날로그label의 체크박스 스타일을 사용할 수 있습니다. 여기는 해석을 하지 않고 제 이전 데모를 붙여서 관심 있는 것은 스스로 할 수 있습니다.http://codepen.io/chitanda/pen/XbNBKE/