फ़ायरफ़ॉक्स में एक चेकबॉक्स स्टाइल करें - चेक और सीमा हटाएं

Question

मैं फ़ायरफ़ॉक्स में चेकबॉक्स कैसे स्टाइल कर सकता हूं, और चेकमार्क और सीमा गायब हो जाती है?

http://jsfiddle.net/moneylotion/qZvtY/

सीएसएस:

body { background: black; } 
#conditions-form { color: white; } 
#conditions-form input[type=checkbox] { 
    display:inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -o-appearance:none; 
    appearance: none; 
    width:19px; 
    height:19px; 
    background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left; 
    cursor:pointer; 
} 
#conditions-form input[type=checkbox]:checked { 
    background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left; 
} 

HTML:

<form id="conditions-form"> 
    <ul> 
     <li> 
      <input id="condition3" type="checkbox" name="conditions[condition3]"></input> 
      <label class="checkbox" for="condition3">Conditions 3</label> 
     </li> 
    </ul> 
</form> 

Answer 1

यह tutsplus tutorial मेरे सवाल को हल किया।

input[type="checkbox"] { 
 
    display:none; 
 
} 
 
    
 
input[type="checkbox"] + label span { 
 
    display:inline-block; 
 
    width:19px; 
 
    height:19px; 
 
    margin:-1px 4px 0 0; 
 
    vertical-align:middle; 
 
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat; 
 
    cursor:pointer; 
 
} 
 
input[type="checkbox"]:checked + label span { 
 
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat; 
 
}

<input type="checkbox" id="c1" name="cc" /> 
 
<label for="c1"><span></span>Check Box 1</label>

Answer 2

एक काफी आसान तरीका आप <label> टैग के माध्यम से यह कर सकते हैं नहीं है। बस चेकबॉक्स के चारों ओर एक लेबल रखें, और एक डमी तत्व डालें जो कस्टम स्टाइल चेकबॉक्स के लिए उपयोग किया जाएगा।

label.checkbox input[type="checkbox"] {display:none;} 
 
label.checkbox span { 
 
    display:inline-block; 
 
    border:2px solid #BBB; 
 
    border-radius:10px; 
 
    width:25px; 
 
    height:25px; 
 
    background:#C33; 
 
    vertical-align:middle; 
 
    margin:3px; 
 
    position: relative; 
 
    transition:width 0.1s, height 0.1s, margin 0.1s; 
 
} 
 
label.checkbox :checked + span { 
 
    background:#6F6; 
 
    width:27px; 
 
    height:27px; 
 
    margin: 2px; 
 
} 
 
label.checkbox :checked + span:after { 
 
    content: '\2714'; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: -2px; 
 
    left: 5px; 
 
    color: #99a1a7; 
 
}

<label class="checkbox"> 
 
    <input type="checkbox"/> 
 
    <span></span> 
 
    I like cake 
 
</label>

---

संपादित: उदाहरण के लिए ध्यान दें कि रंगों के कुछ विकल्प आपके चेकबॉक्स का राज्य colourblind लोगों के लिए अदृश्य प्रस्तुत करना हो सकता है। इस कोड को बनाते समय मैंने इसके बारे में नहीं सोचा था, लेकिन उपर्युक्त डेमो आर/जी रंगीन लोगों के लिए अदृश्य हो सकता है। जब इस को लागू करने, रखने कृपया है कि मन में (उदाहरण के लिए उज्ज्वल/गहरे रंग चुन सकते हैं या आकार में कुछ अंतर दिखाने)

---

शैलियों मैं इस्तेमाल किया बस मनमाने ढंग से कर रहे हैं, और आप कुछ भी आप चाहते हैं कि बदल सकते हैं । आप ::before छद्म-तत्व के माध्यम से इसके अंदर कुछ पाठ भी टॉगल कर सकते हैं, जैसे मैंने here किया है।

मैं आपके प्रश्न में उपयोग करने के लिए प्रदान की गई छवि यूआरएल को खोलने में सक्षम नहीं था, लेकिन मुझे लगता है कि आप इस कोड को थोड़ा सा संशोधित करके जो भी छवि चाहते हैं उसे शामिल करने में सक्षम होंगे। बस उस यूआरएल यूआरएल पर वर्तमान background रंग बदलें जिसे आप उपयोग करना चाहते हैं।

नोट: यह some older browsers में काम नहीं करेगा।

Answer 3

उपरोक्त स्वीकृत उत्तर बहुत अच्छा है लेकिन this slight tweak जोएटेजे 50 से बेड़े के लिए चेक-बॉक्स को टैब्ड करने की अनुमति देता है।

प्रदर्शन के बजाए अस्पष्टता 0 का उपयोग करना कोई मतलब नहीं है कि चेकबॉक्स अभी भी टैबबल योग्य है और इसलिए कीबोर्ड द्वारा पहुंचा जा सकता है।

स्थिति पूर्ण स्थान इनपुट बॉक्स चेक बॉक्स के शीर्ष बाईं ओर स्थित है जिसका अर्थ है कि आपका स्वरूपण साफ रहता है।

input[type="checkbox"] { 
 
    opacity: 0; 
 
    position: absolute; 
 
} 
 
input[type="checkbox"] + label { 
 
    text-align:center; 
 
    cursor:pointer; 
 
} 
 
input[type="checkbox"]:focus + label { 
 
    background-color: #ddd; 
 
} 
 
input[type="checkbox"] + label div { 
 
    display:inline-block; 
 
    line-height: 16px; 
 
    font-size: 12px; 
 
    height: 16px; 
 
    width: 16px; 
 
    margin:-0px 4px 0 0; 
 
    border: 1px solid black; 
 
    color: transparent; 
 
} 
 
input[type="checkbox"]:checked + label div { 
 
    color: black; 
 
}

<input type="checkbox" id="c1" name="cc" /> 
 
<label for="c1"> 
 
    <div>&#x2714;</div>Check Box 1<br /> 
 
</label> 
 
<input type="checkbox" id="c12" name="cc" /> 
 
<label for="c12"> 
 
    <div>&#x2714;</div>Check Box 2<br /> 
 
</label>

Answer 4

एक सफाई घोल IMHO है कि तत्वों पुनः बनाने का शुद्ध सीएसएस का उपयोग करता है।

Codepen

   input[type="checkbox"] { 
 
      opacity: 0; 
 
      position: absolute; 
 
     } 
 

 
     input[type="checkbox"] ~ label:before { 
 
      content: ''; 
 
      display: inline-block; 
 
      cursor: pointer; 
 
      ... 
 
      border: 3px solid #999; 
 
      border-radius: 2px; 
 
      transition: .3s; 
 
     } 
 

 
     input[type="checkbox"]:checked ~ label:before { 
 
      background: #333; 
 
     }