Tekst wewnątrz przycisku radiowego

Question

Robię wejście, które wygląda tak:

Istnieje wiele różnych sposobów podejścia do dokonywania takiego wejścia, ale staram się zrobić to z jak najmniejszym javascript jak to możliwe.

Wypełnienia dla odpowiedzi z siatką wyglądają podobnie jak przycisk radiowy, Z WYJĄTKIEM mają etykiety na wewnętrznej stronie przycisku. Niestety, tradycyjny przycisk radiowy po prostu nie działa.

Szukam sposobu naśladować wygląd siatkę odpowiedzi bez używania zbyt wiele javascript/jquery/crazy css. Jakieś sugestie?

---

prostu do wyjaśnienia:

• Nie szukam kogoś do kodu w górę całe wejście.
• Wiem, że muszę używać javascript/jquery/css, ale szukam czegoś bardziej eleganckiego niż rozwiązanie javascript/jquery.
• Nożna Cross jest niezbędna

---

Postmortem: wybrałem odpowiedź, że to zrobiłem, ponieważ włączone wszystko co chciałem. Dla czytelników tej odpowiedzi to nie działa dobrze w IE7. W końcu zdecydowałem się pójść z ikonkami, ale pozycja etykiety była dobrym pomysłem i może działać w IE8/9 (jestem na macu i nie mam dla nich maszyn wirtualnych)

Oto, co ostatecznie zrobiłem HTML/CSS mądry.
Używane etykietę jako selektora i nie JS zmienić 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

Jest to prawdopodobnie tak dobre, jak to robi bez wchodzenia prawie całkowicie niestandardowe javascript:

http://jsfiddle.net/MU95N/

Tylko css ale jesteś bardzo ograniczony w tym, co możesz zrobić. Musiałbyś zobaczyć, jak trudno jest zrobić to w różnych przeglądarkach, ale niektóre rzeczy mogą się nie zgadzać.

<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

Ponieważ jest gotowy styl przycisku (jest przycisk radiowy Jestem całkiem pewien, że system operacyjny lub przeglądarka ustawia domyślny rozmiar gdy zakodowany z html) Jestem całkiem pewny, że nie będziesz w stanie umieścić tekstu wewnątrz przycisku radiowego używając html i css pracujących w połączeniu. Powiedziałem, że szukałem przycisków, które zrobią to, co chcesz. Naturalnie Google i tacy zwrócili wiele wyników, aby zrobić to za pomocą różnych metod, ale wszystkie wymagały języków programowania innych niż sam HTML i css.

The best thing I found was this jQuery and Css button styling system. JQuery osiągnie to, co chcesz z przycisków, a css pozostawi ci możliwość nadania im ładnego wyglądu niestandardowego.

Pełny kod do tworzenia ramek dla przycisków znajduje się na stronie, naturalnie będziesz musiał go zmodyfikować, aby był taki, jak chcesz, ale to na pewno Ci się uda.

Answer 3

Dlaczego nie używać css? Oto ten, który używa jQuery i CSS ...

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