라디오 버튼에 이미지 넣기

<li>
<p>싱글</p>
<input id="B1" type="radio" name="bed" value="single_bed" required/>
<label for="B1" id="single"></label>
</li>

label에 id값을 넣어주고 

 

#single{
    content:url("../../images/lodgingList_images/single_bed.png");
    width:50px;
}

 

css로 이미지 넣은다음에 크기조절

 

[type=radio] { 
  position: absolute;
  display:none;}

라디오 버튼의 동그라미 none하는 코드

 

 

[type=radio] + label {
  cursor: pointer;}

커서포인터 변경

 

input[type=radio]:checked + label{
  border-bottom: 5px solid indigo;} 

체크했을때 그 부분 강조

 

근데 이렇게 하면 required 가 안먹히는 현상이 발생한다

 

display:none이 문제였는데..

 

border:none도 해보고

border:0도 해보고 다 안됨 ㅠㅠ 

우선은 width:1px로 작은 점을 만들었음