Проблема с настраиваемой радиокнигой CSS3

Question

Я следую wittysparks.com, создаю пользовательскую радиокнопку, все работает нормально, но если добавить больше содержимого на этикетке, будут отображаться неиспользуемые изображения.

код, как показано ниже, работает.

<input id="radio2" name="groupradio" type="radio" value="Radio 2" tabindex="6" /><label  for="radio2">I am Group Radio 2 </br> 
</label> 

после добавления дополнительного содержимого в код выдается проблема.

<input id="radio2" name="groupradio" type="radio" value="Radio 2" tabindex="6" /><label for="radio2">I am Group Radio 2 </br> 
I am Group Radio 2 </br> 
I am Group Radio 2 </br> 
I am Group Radio 2 </br> 
I am Group Radio 2 </br> 
I am Group Radio 2 </br> 
I am Group Radio 2 </br> 
I am Group Radio 2 </br> 
I am Group Radio 2 </br> 
</label> 

это мой CSS

/*! 
* WittySparks - (c) Sravan Kumar, freely distributable, can modify as per your needs. 
* WittySparks.com.com 
*/ 
input[type='radio'], input[type='checkbox']{opacity:0;position:absolute;filter:alpha(opacity=0);margin:5px 0 0 5px} 
input[type='radio']:focus+label, input[type="checkbox"]:focus+label{color:#C30} 
input[type="checkbox"]+label, input[type="radio"]+label{background:url('wittysparks_checkbox_radio.png') left top no-repeat;position:relative;margin:0;padding:0 0 0 50px;cursor:pointer;line-height:43px;min-height:43px;display:inline-block;z-index:0;font-size:30px;font-weight:bold} 
input[type="checkbox"]+label{background-position:0 0} 
input[type="radio"]+label{background-position:0 -200px} 
input[type='checkbox']:checked+label{background-position:0 -100px} 
input[type='radio']:checked+label{background-position:0 -300px} 
input[type='checkbox']:disabled+label{background-position:0 -400px;color:#999} 
input[type='radio']:disabled+label{background-position:0 -600px;color:#999} 
input[type='checkbox']:disabled:checked+label{background-position:0 -500px;color:#999} 
input[type='radio']:disabled:checked+label{background-position:0 -700px;color:#999} 

Учебник веб-сайтов. "http://www.wittysparks.com/2012/04/17/pure-css3-custom-checkbox-and-radio-buttons-with-sprite-image/"

Update jsfiddle

http://jsfiddle.net/shivanraptor/fdEHj/1/

Answer 1

Сам CSS зависит от высоты этикетки. Если высота метки уменьшается до 1 строки или два, проблема исчезает.

Попробуйте отделить эффект ярлыка от CSS.

Answer 2

Чтобы показать свои собственные радио-кнопки, а не по умолчанию, как только что меняется в зависимости от браузера, я использовал это: http://www.screwdefaultbuttons.com/

Он работает в IE6 +, Chrome, Firefox, Safari ...

http://www.screwdefaultbuttons.com/

включая скрипт в заголовке:

<script src="js/jquery.screwdefaultbuttonsV2.min.js" ></script> 

Css

$('input:radio').screwDefaultButtons({ 
    image: "url(images/radio.jpg)", 
    width: 85, 
    height: 85 
}); 

.styledRadio { 
/* Your styles here */ 
} 

.styledCheckbox { 
    /* Your styles here */ 

}