[css] radio, checkbox css 바꾸기

 

원하는 radio, checkbox 를 구현하는 방법은 두가지가 있다.

1. 이미지를 넣어서 라디오 버튼과 체크 박스에 내가 원하는 이미지를 넣는 방법.

/*css*/
 
input[type="radio"], input[type="checkbox"] {
  display:inline-block;
  width:20px;
  height:20px;
  vertical-align:middle;
  background:url(radio_n.png) no-repeat 0 0;
  appearance: none;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  border-radius:0;
  border:0;
}
input[type="radio"] { background:url(radio_n.png) no-repeat 0 0; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  display:inline-block;
  width:20px;
  height:20px;
  vertical-align:middle;
  background:url(radio_p.png) no-repeat 0 0;
  appearance: none;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  border-radius:0;
  border:0;
}
 
 
/*html*/
<input type="radio" name="radio1" checked="checked" /> 라디오 1
<input type="radio" name="radio1" /> 라디오 2
<input type="checkbox" /> 체크 박스

결과는 다음과 같다.

 

하지만 문제점이 있다. appearance라는 속성은 익스플로러와 오페라에서는 지원을 하지 않는다.

그래서 이런 경우가 싫으신 경우 2번째 방법인 label을 사용하는게 낫다.

다만 이방법은 구현하는데 불편하다.

/*css*/
 
radio { display: none; 
.radio:nth-of-type(1):checked ~ .radio1 { background-image: url(radio_p.png); }
.radio:nth-of-type(2):checked ~ .radio2 { background-image: url(radio_p.png); }
.radio1 { width: 20px; height: 20px; background-image: url(radio_n.png); position: absolute; left: 0px; }
.radio2 { width: 20px; height: 20px; background-image: url(radio_n.png); position: absolute; left: 50px; }
 
/*html*/
<input type="radio" id="radio1" class="radio" name="radio" checked="checked" />
<input type="radio" id="radio2" class="radio" name="radio" />
<label for="radio1" class="radio1"></label>
<label for="radio2" class="radio2"></label>