[css] radio, checkbox 이미지 바꾸기 2

폼입력 컨트롤중 하나인 라디오버튼(radio)과 체크박스(checkbox)를 CSS의 선택자와

백그라운드 속성을 이용하여 디자인을 입히는 방법을 찾아 변경하는 방법을 정리해본다.

HTML에서 다음과 같이 label을 이용하면 된다. ㄹㄹㄹㄹ

<p>
  <input type="radio" name="gender" id="Male" value="남자" checked="checked" />
  <label for="Male">남자<span class="check_switch"></span></label>
</p>

CSS의 경우 HTML과 달리 기존과 달리 추가해주어야 하는 곳이 많다.

IE에서는 적용되지 않게 하기위한 :not 선택자, 라디오버튼(radio)과 체크박스(checkbox) 비활성화와 체크여부를 알기위한 :disabled, :checked 선택자등 CSS3에서 추가된 가상선택자등이 사용되었다.

p>input[type="checkbox"], p>input[type="radio"] { position:relative; top:-1px; vertical-align:middle; }

위 부분은 CSS3가 되지 않는 IE에서 라디오버튼(radio)과 체크박스(checkbox)를 정렬하기 위한 곳으로 기존과 비슷하다.

p:not(#cssbrowser)>input[type="checkbox"], p:not(#cssbrowser)>input[type="radio"] {
  position:absolute; left:0; top:0; width:20px; height:20px; margin:0; opacity:0;
}

전체적으로 :disabled, :checked, :focus 등의 선택자가 적용되지 않아 올바로 적용되지 IE에서 해당 CSS속성들이 적용되지 않게 하기 위해 CSS3에서 추가된 :not 가상 선택자를 이용하여 속성들을 줌으로써 IE속성에서는 적용되지 않게 설정했다.

p:(#cssbrowser)의 경우 P태그중 cssbrowser라는 id를 가지고 있지 않는 p태그에 스타일을 적용한다는 뜻이다.

위 부분의 경우 라디오버튼(radio)과 체크박스(checkbox)의 위치를 잡아준후 opacity 속성을 사용하여 투명도를 0으로 함으로써 사용자에게 보이지 않도록 해주는 부분이다. 

p:not(#cssbrowser)>input[type="checkbox"] + label, p:not(#cssbrowser)>input[type="radio"] + label {
 
  margin:0 0 0 0; padding:4px 0 2px 30px; display:inline-block;
  background:url(./bg_wolfharuradiocheckbox_1.png) no-repeat left top;
  width:100%; height:22px; display:block;
  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
 
}
 
p:not(#cssbrowser)>input[type="radio"] + label { background-position:left -100px; }
 
p:not(#cssbrowser)>input[type="checkbox"]:disabled + label { background-position:left -25px; }
 
p:not(#cssbrowser)>input[type="checkbox"]:checked + label { background-position:left -50px; }
 
p:not(#cssbrowser)>input[type="checkbox"]:checked:disabled + label { background-position:left -75px; }
 
 
 
p:not(#cssbrowser)>input[type="radio"]:disabled + label { background-position:left -125px; }
 
p:not(#cssbrowser)>input[type="radio"]:checked + label { background-position:left -150px; }
 
p:not(#cssbrowser)>input[type="radio"]:checked:disabled + label { background-position:left -175px; } 

위 부분이 라디오버튼(radio)과 체크박스(checkbox)의 폼컨트롤과 연결된 label태그에 기본 라디오버튼(radio)과 체크박스(checkbox)대신 사용될 이미지를 백그라운드로 지정하고, 위치를 잡는등의 CSS가 적용된 부분.

 

  :disabled 사용불가 상태의 폼 컨트롤

  :checked 체크상태인 라디오버튼(radio)과 체크박스(checkbox)

마지막으로 다음 내용을 추가한다.

p:not(#cssbrowser)>input[type="checkbox"]:focus + label, p:not(#cssbrowser)>input[type="radio"]:focus + label {
  -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.05), 0 0 8px rgba(82,168,226,0.6);
  -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.05), 0 0 8px rgba(82,168,226,0.6);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.05), 0 0 8px rgba(82,168,226,0.6);
}

이부분은 라디오버튼(radio)과 체크박스(checkbox)의 폼컨트롤이 opacity속성에 의해 사용자에게 보이지 않는 경우 이므로 사용자가 현재 폼컨트롤 위치를 확인할수 없다.

이러한 부분을 조금이나마 해결하기 위해 해당 폼컨트롤이 포커스(:focus) 될 경우 그와 연결된 label 태그에 변화를 줌으로써 사용자가 현재 폼컨트롤 위치를 확인할 할수 있도록 해준다.

출처: http://wolfharu.tistory.com/3 [WolfHaru]