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
  1. opacity: 0;   
tulajdonságot. Ezután az őt követő label elemmel dolgozunk:
  1. #myform input[type="checkbox"] + label {  
  2. background: url('custom_checkbox.png') left no-repeat;  
  3. 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
  1. <label class="option">  
  2.   <input type="checkbox" class="form-checkbox" value="flag_recommend" name="flag">  
  3.   <span title="Add Recommend flag">Recommend</a>  
  4. </label>  
És egyszerűen
  1. label.option .form-checkbox {  
  2.   display: none;  
  3. }  
  4. label.option span {  
  5.   cursor: pointer;  
  6. }  
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:
  1. <form id="heyho">   
  2.   <label class="option">  
  3.     <input type="checkbox" name="subidubi" />  
  4.     <span>Yes for Subidubi</span>  
  5.   </label>  
  6. </form>  
  1. #heyho label.option {  
  2.     cursor: pointer;  
  3. }  
  4. #heyho label.option input[type="checkbox"] {  
  5.     display: none;  
  6. }  
  7. #heyho label.option input[type="checkbox"] + span {  
  8.     background: url(images/checkless.png) no-repeat bottom left transparent;  
  9.     padding: 1px 0 1px 30px;  
  10. }  
  11. #heyho label.option:active input[type="checkbox"] + span,  
  12. #heyho label.option:hover input[type="checkbox"] + span {  
  13.     background: url(images/checkless_hover.png) no-repeat bottom left transparent;  
  14. }  
  15. #heyho label.option input[type="checkbox"]:checked + span {  
  16.     background: url(images/checked.png) no-repeat bottom left transparent;  
  17. }  
  18. #heyho label.option:active input[type="checkbox"]:checked + span,   
  19. #heyho label.option:hover input[type="checkbox"]:checked + span {  
  20.     background: url(images/checked_hover.png) no-repeat bottom left transparent;  
  21. }  
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!