html - ラジオボタンの幅を固定する方法

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/

前もって感謝します。