0

我按照 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/ ”

更新 jsfiddle

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

4

2 回答 2

0

为了显示我自己的单选按钮而不是根据浏览器更改的默认按钮，我使用了这个：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 */

}
于 2015-03-13T10:30:25.410 回答
0

CSS 本身受标签高度的影响。如果标签的高度减少到一两行，问题就消失了。

尝试通过CSS分离标签的效果。

于 2013-03-08T02:25:29.083 回答