Checkbox kinézet CSS-ből?

[hugo87]

Lehet checkbox kinézetet CSS-ből úgy megcsinálni, hogy az nagyjából minden böngészőben ugyanúgy nézzen ki? Van egy nagyjából szépen összerakott formom, de a checkboxok meg baromira nem illeszkednek bele. A border, background-color, color, padding, margin és egyebeket minden böngésző másképp értelmezi. Nem találok erről jó leírást, csak sírásokat. Ennyire vacak a CSS?

[zeuge]

A böngészők nem akarják a checkboxot formálni. Igen ez nekem sem tetszik. Background-color ... sehol. Sőt engem az is idegel, hogy a mozilla le se tojja a scrollbar -omat... 

[Charley]

A checkbox kinézetét nem lehet normálisan és böngészőfüggetlenül állítani CSS-ből jelenleg. Megoldást erre csak javascriptből lehet "eszkábálni".

Idemásolok egy példát, amin lehet még csiszolni, de alapvetően müködik. A window.onload-ra meghívott függvényből végigmegy az input elemeken, a checkbox típusúakat eltünteti, tesz egy-egy img-t a helyükre, állít nekik egy classt (bbox) a képnek, az onclick eventre meg tesz egy handlert, ami változtatja a kép forrását és a checkbox állapotát a kép-klikkre. Én a két gif képben rajzoltam a "dizájnt" hozzá (imgTrue/imgFalse). Sokat lehetne még csiszolni rajta, de kezdetnek jó.

Kód:

<script type="text/javascript"><!-- //
var inputs;
var imgFalse = '/images/checkbox_false.gif';
var imgTrue = '/images/checkbox_true.gif';

function init() {
  replacecheckboxes();
}

function replacecheckboxes() {
  inputs = document.getElementsByTagName('input');
  for(var i=0; i < inputs.length; i++) {
    if(inputs[i].getAttribute('type') == 'checkbox') {
      var img = document.createElement('img');
      if(inputs[i].checked) {
        img.src = imgTrue;
      } else {
        img.src = imgFalse;
      }
      img.className = 'bbox';
      img.id = 'checkimage'+i;
      img.onclick = new Function('checkchange('+i+')');
      inputs[i].parentNode.insertBefore(img, inputs[i]);
      inputs[i].style.display='none';
    }
  }
}

function checkchange(i) {
  if(inputs[i].checked) {
    inputs[i].checked = false;
    document.getElementById('checkimage'+i).src=imgFalse;
  } else {
    inputs[i].checked = true;
    document.getElementById('checkimage'+i).src=imgTrue;
  }
}

window.onload = init;
// --></script>

[hugo87]

Ez a checkbox így nagyon jó lett. Sokat kínlódtam vele, és már lassan azon gondolkodtam, hogy átteszem egy szürke dobozba a formot, hogy kinézzen valahogy. Most csináltam két screenshotot egy szép checkboxról, betettem gifeknek és kész.

Nagyon köszi!