Speciális elemek megváltoztatása

Sajnos a weboldal készítésnek is vannak nehézségei, mint pl. az, hogy a checkbox-ok és a legördülő listák kinézetét nehéz megváltoztatni. A checkbox-ok kinézetének hiába állítunk be egy hátteret, vagy ha a pipát szeretnénk kicserélni, hiába próbálkozunk. A legördülő listák kinézetével vagy a kis nyilacska megváltoztatásával szintén meggyűlik a bajunk.

Az alábbi példában mint a checkbox-nak, mint a legördülő listának beállítottunk egy hátteret:

    input[type="checkbox"].css-example-background,
    select.css-example-background
    {
        background: url( "../../images/static/tape.png" );
        border: none;
    }


        

Ahogy láthatjuk a checkbox-nak a háttere nem változik meg és a keret sem tűnt el. A legördülő listának pedig a nyilacskája nem változott semmit.

Ezekben az esetekben csak egy lehetőségünk van az elemek megváltoztatására. Teszünk egy másik elemet, pl. egy "span" elemet melynek beállítunk egy megfelelő hátteret és az adott elemet átlátszóvá tesszük.
 

    <span class="checkbox-back-example-1">
        <input type="checkbox" class="css-example-background"/>
    </span>

    <span class="select-back-example-1">
        <select name="" id="" class="css-example-background">
            <option value="">Opció</option>
        </select>
    </span>

    .checkbox-back-example-1
    {
        background: url("../../images/static/check-mark-3-24.png") no-repeat scroll center center #8DC63F;
        padding: 7px 2px;
    }
    .checkbox-back-example-1 input[type="checkbox"].css-example-background,
    .select-back-example-1 select.css-example-background
    {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    .select-back-example-1
    {
        background: url( "../../images/static/arrow-155-32-green.png" ) right center no-repeat;
        background-size: 30%;
        border: 1px solid;
        padding: 7px 0px;
    }


        

A "span" elemeknek beállítjuk a háttérképet, és a checkbox meg a legördülő lista elemeket átlátszóvá tesszük az "opacity" tulajdonsággal.
Sajnos vannak böngészők melyek ezt a tulajdonságot nem támogatják, vagy más értékekkel kell ellátni őket, de mindenütt van rá megoldás, pl:

• Firefox esetében: opacity: 0.40
• Internet explorer esetében: filter: alpha(opacity=40);

Bár sikerült ezáltal megváltoztatni az elemek kinézetét szükségünk van még némi javascriptre, hogy az elemek jól működjenek. Ha észrevettük a checkbox esetében hiába kattintunk, hogy bepipáljuk, mert nem látszik, a legördülő lista esetében meg ki tudunk választani egy opciót, de ez szintén nem látszik. A példa további részét a javascript leckékben folytatjuk.