Botón de radio personalizado CSS puro (ancho completo)

Deseo diseñar un botón de opción como este usando solo CSS (sin imagen de fondo):

Botón de radio de ancho completo

Izquierda: marcada / derecha: sin marcar

Sé cómo reemplazar el punto de la radio o la marca de la checkbox (hay muchos tutoriales en Internet sobre eso), pero no pude encontrar la manera de que el rectángulo se colocara detrás del texto de la etiqueta como este (el rectángulo es 100 % del tamaño de la entrada y no deja espacio en blanco adicional a su alrededor).

La compatibilidad con navegadores más antiguos (IE8) se debe tener en cuenta.

Este es mi html (estoy usando bootstrap):

(No uso bootstrap)

HTML

   

CSS

 label.radio { cursor: pointer; } label.radio input { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; } label.radio span { padding: 7px 14px; border: 2px solid #EEE; display: inline-block; color: #009BA2; border-radius: 3px; text-transform: uppercase; } label.radio input:checked + span { border-color: #009BA2; } 

Enlace JSFiddle: https://jsfiddle.net/edbmwz0c/

Hope puede ayudarte

Creo que puedes modelarlo de la misma manera que los botones, así que creo que esto debería ser el truco

  .checkbox{ //other stuff background-color: #ffffff !important; } 

¡Es importante usarlo! Es importante porque de esa manera anulas el estilo bootstraps