별도의 레이블 및 입력

Question

배경 이미지가있는 InputRadio을 포함하는 label이 있습니다. 여기에서 알 수 있듯이

왼쪽에 5-10pix와 같이 "Ja"와 "Nej"가 필요하지만 해결책을 찾지 못하는 것 같습니다. 누군가 나를 도와 줄 수 있습니까?

HTML :

<label id="labelradio1" for="Radio1">Ja 
<input id="Radio1" type="radio" value="yes"></label> 
<label id="labelradio2" for="Radio2">Nej 
<input id="Radio2" type="radio" value="no"></label> 

CSS :

#txtradiocall input[type='radio']{ 
    position:absolute; 
    margin: -99999px; 
} 


#txtradiocall label{ 
    display: inline-block; 
    cursor: pointer; 
    width: 15px; 
    height: 15px; 
    margin: 4px; 

} 

#txtradiocall #labelradio1 { 
    background: url('http://www.xxxx.com/images/images/thumb_up_green-v2.png'); 
    background-repeat:no-repeat; 
    cursor: pointer; 
    width: 35px; 
    height: 22px; 
} 

#txtradiocall #labelradio2 { 
    background: url('http://www.xxxx.com/images/images/thumb_down-red-v2.png'); 
    background-repeat:no-repeat; 
    cursor: pointer; 
    width: 35px; 
    height: 22px; 
} 

Answer 1

내가 좋을 것 :

#txtradiocall #labelradio1 { 
    background-image: url('http://placekitten.com/35/22'); 
} 
#txtradiocall #labelradio2 { 
    background-image: url('http://placekitten.com/35/22'); 
} 

#txtradiocall label { 
    padding: 0 40px 0 0; 
    cursor: pointer; 
    width: 35px; 
    height: 22px; 
    background-position: 100% 50%; 
    background-repeat: no-repeat; 
} 

JS Fiddle demo. 속기로 id 기반 선택기 background-repeat 및 background-position에 대한 나중에 선언을 무시하기 때문에

은 위가 아니라 속기보다는 background-image 속성을 지정합니다 (속기는 모든 속성, -color, -repeat 및 -position을 정의하기 때문에).

또한 모든 공유 속성을 한 곳에서 지정하면 속성을 일관성 있고 쉽게 유지 관리 할 수 ​​있습니다.