चेकबॉक्स स्टाइल सफारी मोबाइल

Question

पर काम नहीं करता मैं निम्नलिखित की तरह चेक बॉक्स शैली करना चाहते हैं:

यह मेरा सीएसएस है:

.checkboxcontact input[type="checkbox"] { 
    -webkit-appearance: none; 
    background-color: white; 
    border: 1px solid #d44803; 
    padding: 9px; 
    border-radius: 3px; 
    display: inline-block; 
    position: relative; 
    float:left; 
} 

.checkboxcontact input[type="checkbox"]:checked { 
    background-color: #d44803; 
    border: 1px solid white; 
    color: #fff; 
} 

.checkboxcontact input[type="checkbox"]:checked:after { 
    content: '\2714'; 
    font-size: 14px; 
    position: absolute; 
    top: 0; 
    left: 3px; 
    color: #fff; 
    font-family: "FontAwesome"; 
} 

यह डेस्कटॉप पर सही से पता चलता और मोबाइल फोन पर क्रोम।

लेकिन समस्या यह है iPhone पर Safari के साथ है। यह इस तरह से पता चलता है:

मैं इसे कैसे ठीक कर सकते हैं? क्या कोई फॉलबैक या कुछ है?

Answer 1

के रूप में यह ऊपर सुझाव दिया गया था, छद्म तत्वों जानकारी के साथ अच्छी तरह से काम नहीं करते, तथापि, यह अंदर लेबल चेकबॉक्स रैप करने के लिए एक अच्छा विचार हो सकता है - यह W3C है मान्य है, ताकि यह इच्छित के रूप में काम करता है, और आपको लेबल के लिए for टैग का उपयोग करने की आवश्यकता नहीं है, न ही इनपुट चेकबॉक्स के लिए id का उपयोग करें।

यहाँ HTML है:

<label class="custom-checkbox"> 
    <input type="checkbox" value="checkbox1"> 
    <span>Checkbox</span> 
</label> 

कोड पर्याप्त बहुमुखी है, इसलिए यदि आप सिर्फ चेकबॉक्स की जरूरत है, लेबल के बिना, आप बस अवधि खाली छोड़ - तुम हालांकि टैग रखना है - या वैकल्पिक रूप से आप लेबल पर छद्म तत्वों को लागू करने के लिए अपनी खुद की कस्टम कक्षा बना सकते हैं।यहाँ

.custom-checkbox { 
    position: relative; 
    display: block; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    line-height: 20px; 
} 

.custom-checkbox span { 
    display: block; 
    margin-left: 20px; 
    padding-left: 7px; 
    line-height: 20px; 
    text-align: left; 
} 

.custom-checkbox span::before { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 0; 
    left: 0; 
    background: #fdfdfd; 
    border: 1px solid #e4e5e7; 
    @include vendorize(box-shadow, inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1)); 
} 

.custom-checkbox span::after { 
    display: block; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 0; 
    left: 0; 
    font-size: 18px; 
    color: #0087b7; 
    line-height: 20px; 
    text-align: center; 
} 

.custom-checkbox input[type="checkbox"] { 
    opacity: 0; 
    z-index: -1; 
    position: absolute; 
} 

.custom-checkbox input[type="checkbox"]:checked + span::after { 
    font-family: "FontAwesome"; 
    content: "\f00c"; 
    background:#d44803; 
    color:#fff; 
} 

और एक काम बेला है:

यहाँ सीएसएस है https://jsfiddle.net/ee1uhb3g/

सत्यापित सभी ब्राउज़रों पर परीक्षण किया - एफएफ, क्रोम, सफारी, आईई, आदि

Answer 2

वही समस्या मुझे भी एक बार सामना करना पड़ा। मैं आपको सलाह देता हूं कि आप अपने डिजाइन के अनुसार चेक & अनचेक करें। जब उपयोगकर्ता चेक किया गया, तो छवि स्रोत को चेक छवि में बदलना चाहिए। आप इसके लिए जावास्क्रिप्ट फ़ंक्शन का उपयोग कर सकते हैं। सुनिश्चित करें कि आप छवियों के समान आकार दोनों का उपयोग करें। ताकि उपयोगकर्ता महसूस न कर सकें कि वे 2 अलग-अलग छवियां हैं। आपके संदर्भ के लिए, मैं उन छवियों को जोड़ रहा हूं जिनका मैंने उपयोग किया है।

Check image

Uncheck image

यहाँ मेरी कोड है। कुछ जहां मैंने आपके लिए पाया है। इसे देखो उन छवियों को मेरी शैली पत्रक & में मेरे जावास्क्रिप्ट में प्रस्तुत करना है। जब उपयोगकर्ता ने चेक की गई छवि पर क्लिक किया, तो 'चयनित' कक्षा जिसे मैं हटा रहा हूं। तो, उस अनचेक छवि को उपयोगकर्ता को दिखाया जाएगा।

function ClearSelection() { 
 
    $(".filterlist ul li").each(function() { 
 
     $(this).removeClass("selected"); 
 
    }); 
 
}

.filterlist ul li 
 
{ 
 
\t padding:5px; 
 
\t border-bottom:1px solid gray; 
 
\t cursor:pointer; \t 
 
\t background-image: url("../images/untick.png"); 
 
\t background-repeat:no-repeat; 
 
\t background-position: 10 8; 
 
} 
 
.filterlist ul li.selected{background-image: url("../images/tick.png");}

Answer 3

छद्म तत्व :after या :before इनपुट प्रकार तत्व के साथ ठीक से काम नहीं। तो उनके बाद एक छद्म तत्व जोड़ना सही नहीं है। ताकि चेकबॉक्स के बगल में लेबल जोड़ें और उसके लिए शैली जोड़ सकें।

.checkboxcontact label { 
 
    display: inline-block; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    padding-left: 5px; 
 
} 
 
.checkboxcontact input[type="checkbox"] { 
 
    opacity: 0; 
 
} 
 
.checkboxcontact label::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 17px; 
 
    height: 17px; 
 
    left: 0; 
 
    margin-left: -20px; 
 
    border: 1px solid #d44803; 
 
    border-radius: 3px; 
 
    background-color: #fff;  
 
} 
 

 
.checkboxcontact input[type="checkbox"]:checked + label::before, 
 
.checkboxcontact input[type="checkbox"]:focus + label::before { 
 
    background-color: #d44803; 
 
    border: 1px solid white; 
 
} 
 

 
.checkboxcontact input[type="checkbox"]:checked + label::after { 
 
    content: '\f00c'; 
 
    font-size: 14px; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: -17px; 
 
    color: #fff; 
 
    font-family: "FontAwesome"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="checkboxcontact"> 
 
    <input type="checkbox" id="check1"/> 
 
    <label for="check1"> 
 
     Check me out 
 
    </label> 
 
</div>