如何修复单选按钮的宽度

Question

我想用纯css设置单选按钮的样式。我几乎得到了它，但我不能用固定的宽度制作背景颜色。

这就是我所取得的......

......这就是我想要实现的目标：

这是我的HTML

<form>

<a>
<input id="radio1" type="radio" name="mode" value="size" class="button"> 
<span><label for="radio1">Varones</label></span>
</a>

<a>     
<input id="radio2" type="radio" name="mode" value="count" checked> 
<span><label for="radio2">Mujeres</label></span>
</a>

<a>
<input id="radio3" type="radio" name="mode" value="count" checked>
<span><label for="radio3"> Ambos</label></span>
</a>

</form>

这是我的css

span {
    width: 100px;
}

a {

    font-family:Helvetica,Arial,sans-serif;
    font-size:14px;
    display: block;
    padding:7px;
    display:block;
}

label {
    width:150px;
}

input[type="radio"] {
    display:none;
}

input[type="radio"] + span {
    cursor: pointer;
    padding: 4px 10px;
    background: lightblue; /*fondo del boton inactivo*/
    color: black;
    border-radius: 3px;
}

input[type="radio"]:checked + span {
    padding-right:50px;
    color: red; /*color tipografia boton activo*/
    background: url('flechaRadio.png') right no-repeat;
    background-color:#E5E5E5;/* color fondo boton activo*/ 
    background-position: 70px;
}

input[type="radio"]:hover + label:hover {
    color: black; /*estilo para la tipo del over */
}

以下是示例

http://jsfiddle.net/ploscri/P9yer/

提前谢谢。

Answer 1

您需要在您的跨度中添加display:inline-block并从已选中的选项中删除填充：

span{
    display: inline-block;
    width: 80px;
}

<强> Updated fiddle