[css] radio버튼 디자인 바꾸기

▶ HTML

<ul>
      <li>
        <span class="radio" id="all_list">
          <input type="radio" id="view_all" name="viewtype" value="all" checked="">
          <label for="view_all"><span class="round">라디오버튼</span>1</label>
        </span>
      </li>
      <li>
         <span class="radio" id="lend_list">
            <input type="radio" id="view_live" name="viewtype" value="">
            <label for="view_live">
            <span class="round">라디오버튼</span>2</label>
         </span>
      </li>
</ul>

▶ CSS

input[type="radio"] {
  display:none;
}

input[type="radio"] + label span.round{
  display:inline-block;
  width: 22px;height: 22px;
  margin: -2px 9px 0 4px;
  font-size: 0;
  vertical-align: middle;
  background: url('../images/common/radio_brn.png') no-repeat;cursor:pointer;
}

input[type="radio"]:checked + label span.round {
  background: url('../images/common/radio_brn_slc.png') no-repeat;
}

1. 기존 라디오 버튼을 없애고 디자인 되어있는 라디오 버튼 이미지를 가져와

요소를 만들어 넣어줘 디자인을 바꿔줍니다.

2. 이미지는 두가지 이미지가 필요합니다.(checked 했을때와 안했을때)

3. span.round에 웹접근성을 생각하여 글자를 넣어 안보이게 해주세요.

radio_brn_slc.png

0.00MB

radio_brn (1).png

0.00MB