Autor Zpráva
kuzmic
Profil
#1 · Zasláno: 18. 6. 2013, 11:08:04
Odpovědět Citovat
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: 
1<!DOCTYPE html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4<title>Checkbox</title>
5 
6<style>
7 
8html {
9    height:100%;
10}
11 
12body {
13    position:relative;
14    background:#f2f2f2;
15    height:100%;
16    padding:0;
17    margin:0;
18}
19 
20div#show {
21    width:280px;
22    height:200px;
23    padding:20px;
24    position:absolute;
25    left:50%;
26    margin-left:-120px;
27    top:50%;
28    margin-top:-160px;
29    background:#40464b;
30    border-radius:6px;
31}
32 
33h1 {
34    font-size:14px;
35    color:#f2f2f2;
36    text-align:center;
37    margin:0 0 20px;
38    padding:0;
39    font-family:Arial;
40}
41 
42input[type="checkbox"] {
43    display:none;
44}
45 
46input[type="checkbox"] + label {
47    color:#f2f2f2;
48    font-family:Arial, sans-serif;
49    font-size:14px;
50}
51 
52input[type="checkbox"] + label span {
53    display:inline-block;
54    width:19px;
55    height:19px;
56    margin:-1px 4px 0 0;
57    vertical-align:middle;
58    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
59    cursor:pointer;
60}
61 
62input[type="checkbox"]:checked + label span {
63    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
64}
65 
66input[type="radio"] {
67    display:none;
68}
69 
70input[type="radio"] + label {
71    color:#f2f2f2;
72    font-family:Arial, sans-serif;
73    font-size:14px;
74}
75 
76input[type="radio"] + label span {
77    display:inline-block;
78    width:19px;
79    height:19px;
80    margin:-1px 4px 0 0;
81    vertical-align:middle;
82    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
83    cursor:pointer;
84}
85 
86input[type="radio"]:checked + label span {
87    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
88}
89 
90</style>
91 
92</head>
93 
94<body>
95<div id="show">
96            <input type="checkbox" id="c1" name="cc" />
97            <label for="c1"><span></span>Check Box 1</label>
98            <p>
99            <input type="checkbox" id="c2" name="cc" />
100            <label for="c2"><span></span>Check Box 2</label>
101            <p><br/>
102            <input type="radio" id="r1" name="rr" />
103            <label for="r1"><span></span>Radio Button 1</label>
104            <p>
105            <input type="radio" id="r2" name="rr" />
106            <label for="r2"><span></span>Radio Button 2</label>
107        </div>
108</body>
109</html>
<!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
#2 · Zasláno: 18. 6. 2013, 11:22:10
Odpovědět Citovat
„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
#3 · Zasláno: 18. 6. 2013, 12:47:13
Odpovědět Citovat
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í.
Časová prodleva: 12 let
Toto vlákno je staré, již dlouho do něj nikdo nepřispíval.

Informace a odkazy zde uváděné už nemusejí být aktuální. Nechcete-li řešit zde uvedenou konkrétní otázku, založte si vlastní vlákno, nepište do tohoto. Vložíte-li sem nyní příspěvek, upoutáte pozornost mnoha lidí a někteří z nich si jen kvůli vám přečtou i všechny předcházející příspěvky. Předpokládáte-li, že váš text skutečně bude hodnotný, stiskněte následující tlačítko:


Běda vám, jestli to bude blábol.

0