ugrás a tartalomhoz

checkbox formázás

Burnee · 2011. Feb. 16. (Sze), 20.29
Sziasztok!

Egyszerű a kérdés:
Ismertek/létezik e olyan böngészőfüggetlen (IE7+, FF3+, O8+), javascript-mentes módszer, amellyel tudom formázni a checkbox kinézetét?

- Ha igen: létezik e olyan megoldás, ahol kép hasznnálata nélkül is megoldható?
- Fontos lenne a megjelenés is, mert külön probléma, hogy a böngészők máshova helyezik a checkboxot.

Nem rögtön ide jöttem a kérdésemmel; már sokat olvasgattam róla. Eddig az a megoldás tetszett a legjobban, hogy magára a checkbox input-ra ráhúzunk egy 
opacity: 0;
tulajdonságot. Ezután az őt követő label elemmel dolgozunk:
#myform input[type="checkbox"] + label {
background: url('custom_checkbox.png') left no-repeat;
padding-left: 40px; /* nyilván a képtől mega látványtervtől függően */
Ezek után a háttérképet változtatjuk a különböző psuedo-classokkal (sok van belőle, nem írnám le).

Ezzel a megoldással csípőből két hiba van:
- az opacity tulajodnság nem böngészőfüggetlen
- a háttér nem minden böngészőben kerül pont oda, ahol a checkbox van - így nem is üzemel megfelelően, valamint csúnya is tud lenni.

Ötletadó (de azért minimálisan átgondolt :) ) válaszokat is szívesen fogadok!
Köszike!
‹ Több képi elem egy kép fájlban location.replace nem müxik!! ›
 ■
1

HTML

Poetro · 2011. Feb. 16. (Sze), 20.59
<label class="option">
  <input type="checkbox" class="form-checkbox" value="flag_recommend" name="flag">
  <span title="Add Recommend flag">Recommend</a>
</label>
És egyszerűen 
label.option .form-checkbox {
  display: none;
}
label.option span {
  cursor: pointer;
}
2

már így is ezer hála, de

Burnee · 2011. Feb. 16. (Sze), 21.04
már így is ezer hála, de kifejtenéd kicsit bővebben?
3

checkbox

Poetro · 2011. Feb. 16. (Sze), 21.34
A checkbox-nak nem kell láthatónak lennie, hasonlóan a radio gombhoz, hogy be lehessen pipalni. A label-jére való kattintáskor az állapota egyébként is megváltozik. Ezért is találták ki magát a label-t. hogy megnöveljék a kattintható felületet. Azt hogy ezek után hogyan cserélgeted a hátteret vagy akármit rád bízom.
4

Néha elképedek, mennyit tudok

Burnee · 2011. Feb. 17. (Cs), 01.03
Néha elképedek, mennyit tudok valamivel szenvedni, ami ennyire egyszerű...
köszi mégegyszer!

Ha valakit érdekel, kb így néz ki a dolog checkboxra:

<form id="heyho">	
  <label class="option">
    <input type="checkbox" name="subidubi" />
    <span>Yes for Subidubi</span>
  </label>
</form>


#heyho label.option {
    cursor: pointer;
}
#heyho label.option input[type="checkbox"] {
    display: none;
}
#heyho label.option input[type="checkbox"] + span {
    background: url(images/checkless.png) no-repeat bottom left transparent;
    padding: 1px 0 1px 30px;
}
#heyho label.option:active input[type="checkbox"] + span,
#heyho label.option:hover input[type="checkbox"] + span {
    background: url(images/checkless_hover.png) no-repeat bottom left transparent;
}
#heyho label.option input[type="checkbox"]:checked + span {
    background: url(images/checked.png) no-repeat bottom left transparent;
}
#heyho label.option:active input[type="checkbox"]:checked + span, 
#heyho label.option:hover input[type="checkbox"]:checked + span {
    background: url(images/checked_hover.png) no-repeat bottom left transparent;
}
5

IE 7-8 alatt is működnie

Burnee · 2011. Feb. 17. (Cs), 14.17
IE 7-8 alatt is működnie kéne? csak mert nem teszi :(
Annyira jó lenne js nélkül.
6

Mármint?

Poetro · 2011. Feb. 17. (Cs), 17.03
Melyik része nem működik? Amit én írtam az működik. Lehet hogy egyes CSS szelektorok nem működnek IE7-8 alatt.
7

én is css selectorra

Burnee · 2011. Feb. 17. (Cs), 18.10
én is css selectorra gondoltam először , de nem az a para.
Sosem lesz 'checked' a cucc.
8

jQueryUI Button

nevemrock · 2011. Feb. 18. (P), 06.55
jQueryUI gombjaival is elfedhetsz egy-egy checkboxot, radió elemet, és a külsejét egyszerűen tudod módosítani.
_http://jqueryui.com/demos/button/
9

köszönöm, de js-mentes

Burnee · 2011. Feb. 18. (P), 12.13
köszönöm, de js-mentes megoldást keresek!