Štýl Rádiové tlačidlá s CSS a použiť image - jquery, html, css, obrázok, rádio tlačidlo

Existuje jednoduchý a jednoduchý spôsob, ako navrhnúť prepínače iba pomocou CSS, takže namiesto guľky kliknem na obrázok? Napríklad palec hore / palec dole.

Mám dva prepínače a musím sa zaregistrovaťna ktorý je kliknutý. Prepínače sa zviditeľnia, keď stlačíte tlačidlo a keď kliknete na prepínač, prepínača sa nahradí textom.

TLAČIDLO> TLAČIDLÁ RÁDIA> TEXT

Takto som sa dostal:

HTML

<div id="txtradiocall_lille" style="display:none;">
<input id="Radio1" type="radio" value="yes" class="input_hidden" /><label for="yes"><img src="/images/http://www.xxxx.dk/images/images/thumb_up_green.png" alt="Yes" /></label>
Yes
<input id="Radio1" type="radio" value="no" class="input_hidden" /><label for="no"><img src="/images/http://www.xxxx.dk/images/images/thumb_down.png" alt="No" /></label>
No
</div>

CSS

.txtradiocall_lille input[type="radio"]
{
display:inline;
}

.input_hidden {
position: absolute;
left: -9999px;
}

.selected {
background-color: #ccc;
}

#txtradiocall_lille label {
display: inline-block;
cursor: pointer;
}

#txtradiocall_lille label:hover {
background-color: #efefef;
}

#txtradiocall_lille label img {
padding: 3px;

}

rádio kliknutie

 $("input[type="radio"]").change(function () {
var selection = $(this).val();
getcallaskok(selection, talok);
});

Momentálne získavam obrázky namiesto rozhlasových guliek, zdá sa však, že kliknutia sa nezaregistrovali, pretože po kliknutí nezískam text, ktorý potrebujem.

Môže mi niekto pomôcť, prosím?

odpovede:

3 pre odpoveď č. 1

Osvedčeným postupom je jednoducho použiť prvok označenia takto:

<label id="labelone" for="myradiobutton"></label>

<input type="radio" value="xxx" id="myradiobutton">

Potom pomocou štýlu css upravte označenie. Vo vašom prípade pravdepodobne pridajte obrázok ako pozadie.

Potom jednoducho skryjete prepínačpresunutím mimo obrazovku pomocou absolútneho umiestnenia. N.B. Nezobrazujte prepínač pomocou displeja: žiadny alebo viditeľný: skrytý, pretože je to zlé kvôli dostupnosti.

Užívateľ tak klikne na štítok a vyberie sa prepínač, ktorý je teraz mimo obrazovky.

---

0 pre odpoveď č. 2

Myslím, že skrývam prepínač a používam označenie akorobíš dosť. Môže však vyžadovať určitú opravu. Atribút „for“ v označení odkazuje na ID, nie na hodnotu, ktorú práve robíte. A na zoskupenie prepínača použite meno, nie id ako teraz.

---