Autor Zpráva
kuzmic
Profil
Dobrý den,

chtěl bych moc poprosit o radu. Podle tutorialu: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

jsem se pustil do designu checkboxu. Bohužel jsem zjistil, že v IE8 tento design nefunguje. Stačilo by úplně kdyby se podařilo design v IE8 vypnout a zanechat klasický funkční styl checkboxu.

Ukázka:
http://jsfiddle.net/FhHFT/


Kód:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkbox</title>

<style>

html {
    height:100%;
}

body {
    position:relative;
    background:#f2f2f2;
    height:100%;
    padding:0;
    margin:0;
}

div#show {
    width:280px;
    height:200px;
    padding:20px;
    position:absolute;
    left:50%;
    margin-left:-120px;
    top:50%;
    margin-top:-160px;
    background:#40464b;
    border-radius:6px;
}

h1 {
    font-size:14px;
    color:#f2f2f2;
    text-align:center;
    margin:0 0 20px;
    padding:0;
    font-family:Arial;
}

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

input[type="checkbox"]:checked + label span {
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}

input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

input[type="radio"]:checked + label span {
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}

</style>

</head>

<body>
<div id="show">
            <input type="checkbox" id="c1" name="cc" />
            <label for="c1"><span></span>Check Box 1</label>
            <p>
            <input type="checkbox" id="c2" name="cc" />
            <label for="c2"><span></span>Check Box 2</label>
            <p><br/>
            <input type="radio" id="r1" name="rr" />
            <label for="r1"><span></span>Radio Button 1</label>
            <p>
            <input type="radio" id="r2" name="rr" />
            <label for="r2"><span></span>Radio Button 2</label>
        </div>
</body>
</html>

Předem moc děkuji za rady a tipy jak tento problém v IE8 vyřešit.

Děkuji
Str4wberry
Profil
Předem moc děkuji za rady a tipy jak tento problém v IE8 vyřešit.

Vyřešit to lze JavaScriptem.
Chamurappi
Profil
Reaguji na kuzmice:
jsem se pustil do designu checkboxu
Proč? Uživatel by obyčejné zaškrtávátko nepochopil?

Ve tvé ukázce nejdou hodnoty přepínat klávesnicí.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: