Question

我正在寻找一个仅适用于CSS的单选按钮，适用于我的以下标记。我尝试了很多，可以找到一个工作，但它旁边的按钮和文字太大了。这是我的HTML：

<div id = "quizc", class="chone">
    <h3 class ="quizsub">Question 1</h3>
    <h4>Lorem ipsum</h4> 
    <p>
        <input type="radio" id="rad[1]"rel="0" value="a" name="radgrp0"/>
        <label for="rad[1]">Hello</label>
    </p> 
    <p>
        <input type="radio" id="rad[2]"rel="0" value="b" name="radgrp0"/>
        <label for="rad[2]">World</label>
    </p> 
    <p>
        <input type="radio" id="rad[3]"rel="0" value="c" name="radgrp0"/>
        <label for="rad[3]">Radio</label>
    </p> 
    <p>
        <input type="radio" id="rad[4]"rel="0" value="d" name="radgrp0"/>
        <label for="rad[4]">Television</label>
    </p>
    <input type="radio"rel="0" value="f" name="radgrp0" id="lradio[1]" class="radclr"/>
    <label for="lradio[1]"class="lclr">Clear</label>
</div>

对我有用的CSS是：

p > input[type='radio'] {
    opacity:0;
    position:absolute;
    filter:alpha(opacity=0);
    margin:5px 0 0 5px
}
p > input[type='radio']:focus + label {
    color:#C30
}
p > input[type="radio"] + label {
    background:url('radio.png') left top no-repeat;
    position:relative;
    margin:0;
    padding:0 0 0 50px;
    cursor:pointer;
    line-height:22px;
    min-height:22px;
    display:inline-block;
    z-index:0;
    font-size:16px;
    font-weight:bold
}
p > input[type="radio"] + label {
    background-position:0 -200px
}
p > input[type='radio']:checked + label {
    background-position:0 -300px
}
p > input[type='radio']:disabled + label {
    background-position:0 -600px;
    color:#999
} 
p > input[type='radio']:disabled:checked + label {
    background-position:0 -700px;
    color:#999
}

New Fiddle链接：http://jsfiddle.net/Y9vL7/

Answer 1

我用图片和文字的小版本更新了我的小提琴你走了：http://jsfiddle.net/Y9vL7/2/
希望这是你想要的。
如果你想改变复选框的图像大小，你需要对精灵中的background-position进行一些数学计算。

p>input[type='radio'] {
    opacity:0;
    position:absolute;
    filter:alpha(opacity=0);
    margin:5px 0 0 5px;
}
p>input[type='radio']:focus+label {
    color:#C30
}
p>input[type="radio"]+label {
    background:url('http://i.stack.imgur.com/kPXdm.png') left top no-repeat;
    background-size:22px;
    position:relative;
    margin:0;
    padding:0 0 0 30px;
    cursor:pointer;
    line-height:25px;
    min-height:25px;
    display:inline-block;
    z-index:0;
    font-size:16px;
    font-weight:bold
}
p>input[type="radio"]+label {
    background-position:0 -103px
}
p>input[type='radio']:checked+label {
    background-position:0 -155px
}
p>input[type='radio']:disabled+label {
    background-position:0 -207px;
    color:#999
}
p>input[type='radio']:disabled:checked+label {
    background-position:0 -259px;
    color:#999
}

Answer 2

所以......你可以改变font-size属性。

搜索＆＃34; font-size＆＃34; ，然后以像素为单位降低尺寸。

像这样：http://jsfiddle.net/MLK2M/

font-size:10px;

CSS只有单选按钮

2 个答案: