Как исправить ширину радиокнопки

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