El texto dentro de un botón de radio

Question

estoy haciendo una entrada que tiene este aspecto:

Hay muchas maneras diferentes de acercarse a hacer una entrada de este tipo, pero estoy tratando de hacerlo con el menor Javascript como sea posible.

Los rellenos para una respuesta cuadriculada se parecen mucho a un botón de opción EXCEPTO que tienen sus etiquetas en el interior del botón. Desafortunadamente, el botón de opción tradicional simplemente no funciona.

Estoy buscando una forma de imitar el aspecto de una respuesta en cuadrícula sin utilizar demasiado javascript/jquery/crazy css. ¿Alguna sugerencia?

---

Solo para aclarar:

• No estoy buscando a alguien para codificar hasta la entrada completa.
• Sé que necesito usar javascript/jquery/css, pero estoy buscando algo más elegante que una solución javascript/jquery.
• Cruz compatibilidad del navegador es esencial

---

Postmortem: Escogí la respuesta que hice, ya que incorpora todo lo que quería. Para los lectores de esta respuesta, no funciona bien en IE7. Decidí ir con sprites al final, pero colocar la etiqueta era una buena idea y podría funcionar en IE8/9 (estoy en una Mac y no tengo VM para ellos en este momento)

Esto es lo que finalmente hice con HTML/CSS.
Se utiliza la etiqueta como el selector y han cambiar JS el background-color:

<div style=margin-bottom:5px;> 
    <div style=float:left;> 
     <input type=radio name=answer value=awesome id=answer style=display:none;> 
    </div> 
    <label style=float:left;background-color:red;background-image:url("/assets/images/radio_circle.png"); for=answer> 
     <div style=width:20px;height:20px;text-align:center;vertical-align:middle;> 
      1 
     </div> 
    </label> 
</div> 

Answer 1

Esta es probablemente tan bueno como se pone sin ir más o menos totalmente personalizada javascript:

http://jsfiddle.net/MU95N/

Sólo CSS, pero estás muy limitado en lo que puedes hacer. Sin embargo, tendrías que ver lo difícil que es hacerlo en todos los navegadores, es posible que las cosas no se alineen correctamente.

<input type="radio" name="one" id="one"> 
<label for="one">1</label> 
<input type="radio" name="one" id="two"> 
<label for="two">2</label> 
<input type="radio" name="one" id="three"> 
<label for="three">3</label> 
<input type="radio" name="one" id="four"> 
<label for="four">4</label> 

-

label{ 
    position: relative; 
    left: -13px; 
    top: -3px; 
    font-size: 8pt; 
    opacity: .5; 
} 

Answer 2

Dado que es un estilo preestablecido de botón (siendo un botón de radio Estoy bastante seguro el sistema operativo o el navegador establece el tamaño predeterminado si codificado con html) Soy seguro de que no podrá poner texto dentro de un botón de radio usando html y css trabajando en conjunto. Dicho esto, fui en busca de botones que hicieran lo que quisieras. Naturalmente, Google y tal retornaron muchos resultados para hacerlo a través de varios métodos, pero todos incluían un lenguaje de programación que no era solo html y css.

The best thing I found was this jQuery and Css button styling system. JQuery logrará lo que quiere con los botones y el CSS le dejará la capacidad de darles un aspecto personalizado.

El código completo de cómo crear el marco de trabajo para los botones está en la página, naturalmente, tendrá que modificarlo para que sea de la manera que desee, pero espero que esto le permita comenzar.

Answer 3

¿Por qué no utilizar css? Aquí hay una que utiliza jQuery y CSS ...

http://jsfiddle.net/TrowthePlow/dGxAN/2/