ugrás a tartalomhoz

Form elemek legördülő menüjének formázása

Jackal · 2009. Jún. 7. (V), 11.49
Sziasztok, az alábbi témában kérném a segítségeteket (ugyanis sajnos sehol nem találtam kielégítő információt hozzá):

Szeretnék megformázni, drop down menü, textarea, illetve checkbox form elemeket, mondom sorban, hogy melyiket hogyan:

-a dropdown és a textarea elemek lenyíló ikonját szeretném külön formázni a benne foglalt tartalomtól (ez utóbbi mind betű típusában, színében, hátterében stb., megy), illetve arra szeretnék választ kapni, hogy ennek a területnek van-e olyan eseménye mint magának a szöveget befoglaló területnek (hover stb.)
- checkbox elemet úgy formázni hogy kattintható legyen. Erre láttam olyan javascriptes megoldást, hogy egy js swap imagehez rendeltek egy , a képen nem látható (kipozicionált, vagy más módon eltakart) checkbox gombot, majd a swap image állapotától függően ezt kapcsolgatták. Ezen kívül van valamilyen más megoldás a fenti témára?

Én a form elemek kinézetét az alábbi böngészőkkel teszteltem:

IE 8.0 kompatible mód (mazohistáknak:D), FF 3.06, Opera 9.64, Chrome(2.0172.30), Safari 4 beta, természetesen nagy a szórás a kinézetben. Nem várom el hogy mindegyikben jó legyen, már az is elég ha támpontokat kapok hogy hogyan tovább.

Előre is köszönöm
‹ Látogatott link után szöveg írása cooke-nak és azok listázása? JS naptár adja át a kiválasztott dátumot egy select/option mezőnek ›
 ■
1

Checkbox

Poetro · 2009. Jún. 7. (V), 12.01
A SELECT elemre nem tudok semmi bíztatót mondani, minthogy JavaScripttel lecseréled az egész SELECT mezőt valami teljesen másra, amit már úgy formázol, ahogy akarsz. És persze folyamatosan frissíted az eredeti SELECT-et a cserén végzett műveleteknek megfelelően.

A checkbox valamivel egyszerűbb, ugyanis LABEL elem használatával megoldható. A LABEL-ben helyezed el azt amit meg szeretnél jeleníteni, magát a LABEL-ben levő checkbox elemet pedig elrejted. pl:
<label class="option">
  <input type="checkbox" value="flag" name="flag"/>
  <img src="" class="flag" alt="Flag"/>
</label>
Ekkor a modern böngészők a LABEL-re kattintva átviszok az eseményt a LABEL-en belüli checkbox / radio gombokra.
2

Ilyesmire gondoltál?

Gixx · 2009. Jún. 9. (K), 11.28
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Példával illusztrálva, hozzáférhető kóddal tálalva.
3

Uniform

Poetro · 2009. Jún. 15. (H), 21.27
Egy új pályázó, jQuery módra a Uniform.