चेकबॉक्स का उपयोग करके टॉगल बटन जैसे आईओएस विभिन्न ब्राउज़रों के लिए अलग दिखता है - एचटीएमएल, सीएसएस, सीएसएस 3

मैं वेब डिज़ाइनिंग के लिए थोडा नया हूं।बटन की तरह टॉगल आईओएस बनाने की कोशिश कर रहा है लेकिन समस्या विभिन्न ब्राउज़रों पर इसकी उपस्थिति के साथ है। यह विभिन्न ब्राउज़रों में अलग दिखता है। जैसा कि मैंने परीक्षण किया है यह क्रोम पर ठीक से काम करता है।

क्या कोई मुझे सभी ब्राउज़रों पर दिखने में मदद कर सकता है? टूटी हुई अंग्रेजी के लिए खेद है?

jsfiddle लिंक: http://jsfiddle.net/racy2408/Let1y8yr/

नीचे दिया गया सीएसएस मैंने कोशिश की है:

body {
margin: 30px;
text-align: center;
}
input[type=checkbox],
input[type=radio] {
display: inline-block;
width: 50px;
height: 30px;
position: relative;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-o-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
background-color: #fff;
padding: 1px;
margin: 0px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transform: scale(1);
-webkit-transform: scale(1);
/*Adjust size here*/
-moz-transform: scale(1);
-o-transform: scale(1);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-webkit-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-moz-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-o-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
}
input[type=checkbox]:after,
input[type=radio]:after {
content: " ";
position: absolute;
width: 28px;
height: 28px;
cursor: pointer;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
background-color: #fff;
/* background-image: url(../images/toggle.png);
background-repeat: no-repeat;
background-size: contain; */
transition: all 0.2s ease-in 0.2s;
-webkit-transition: all 0.2s ease-in 0.2s;
-moz-transition: all 0.2s ease-in 0.2s;
-o-transition: all 0.2s ease-in 0.2s;
}
input[type="checkbox"]:checked:after,
input[type="radio"]:checked:after {
left: 23px;
}
input[type=checkbox]:focus,
input[type=checkbox]:active,
input[type=radio]:focus,
input[type=radio]:active {
outline: 0;
}
<h1>Checkbox :</h1>
<input type="checkbox" />
<input type="checkbox" checked />

<h1>Radio :</h1>

<input type="radio" name="group" />
<input type="radio" name="group" checked />
<input type="radio" name="group" />

उत्तर:

जवाब के लिए 3 № 1

इनपुट को जोड़ने में सक्षम नहीं होना चाहिए before तथा after छद्म तत्वों क्योंकि वे कंटेनर नहीं हैं (ईगन <input> बच्चे तत्व नहीं हो सकते हैं)।

यहां टिप्पणी में कुछ और जानकारी है: https://stackoverflow.com/a/4660434/4338477

हालांकि आप एक ही प्रभाव प्राप्त करने के लिए लेबल जोड़ सकते हैं (यह फ़ायरफ़ॉक्स और आईई 9 + में काम करता है):

http://jsfiddle.net/8okjwLxx/2/

<h1>Checkbox :</h1>

<input id="checkbox1" type="checkbox" />
<label for="checkbox1"></label>
<input id="checkbox2" type="checkbox" checked />
<label for="checkbox2"></label>

<h1>Radio :</h1>

<input id="radio1" type="radio" name="group" />
<label for="radio1"></label>

<input id="radio2" type="radio" name="group" checked />
<label for="radio2"></label>

<input id="radio3" type="radio" name="group" />
<label for="radio3"></label>
body {
margin: 30px;
text-align: center;
}

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

input[type=checkbox] + label,
input[type=radio] + label {
display: inline-block;
width: 50px;
height: 30px;
position: relative;
cursor: pointer;
appearance:         none;
-webkit-appearance: none;
-moz-appearance:    none;
box-shadow:         inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-o-box-shadow:      inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
border-radius:         15px;
-webkit-border-radius: 15px;
-moz-border-radius:    15px;
-o-border-radius:      15px;
background-color: #fff;
padding: 1px;
margin: 0px;
transition:         all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition:    all 0.3s ease-out;
-o-transition:      all 0.3s ease-out;
transform:         scale(1);
-webkit-transform: scale(1); /*Adjust size here*/
-moz-transform:    scale(1);
-o-transform:      scale(1);
}

input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
box-shadow:         inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-webkit-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-moz-box-shadow:    inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-o-box-shadow:      inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
}

input[type=checkbox] + label:after,
input[type=radio] + label:after {
left: 0;
content: " ";
position: absolute;
width: 28px;
height: 28px;
cursor: pointer;
border-radius:         15px;
-webkit-border-radius: 15px;
-moz-border-radius:    15px;
-o-border-radius:      15px;
box-shadow:         0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow:      0px 2px 2px 1px rgba(0, 0, 0, 0.2);
background-color: #fff;
/* background-image: url(../images/toggle.png);
background-repeat: no-repeat;
background-size: contain; */
transition:         all 0.2s ease-in 0.2s;
-webkit-transition: all 0.2s ease-in 0.2s;
-moz-transition:    all 0.2s ease-in 0.2s;
-o-transition:      all 0.2s ease-in 0.2s;
}

input[type=checkbox]:checked + label:after,
input[type=radio]:checked + label:after {
left: 23px;
}

input[type=checkbox]:focus,
input[type=checkbox]:active,
input[type=radio]:focus,
input[type=radio]:active {
outline: 0;
}

संबंधित सवाल
सबसे लोकप्रिय