कस्टम छवि में चेकबॉक्स चेक छवि बदलें

Question

मैं सीएसएस के साथ चेकबॉक्स की डिफ़ॉल्ट 'बॉक्स छवि' को बदलने की कोशिश कर रहा हूं, लेकिन यह काम नहीं कर रहा है। क्या इस तरह से कोई रास्ता है?

<input type="checkbox" class="class_checkbox"> 

और वर्ग फ़ाइल में मुझे क्या करना

.class_checkbox{ 
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;  
} 

Answer 1

प्रयास करें:

<input type="checkbox" class="input_class_checkbox"> 

jQuery

$('.input_class_checkbox').each(function(){ 
    $(this).hide().after('<div class="class_checkbox" />'); 

}); 

$('.class_checkbox').on('click',function(){ 
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked')) 
}); 

फिडल: http://jsfiddle.net/cn6kn/

Answer 2

आप शुद्ध सीएसएस का उपयोग कर सकते हैं, बस इस तरह चेकबॉक्स में लेबल जोड़ने:

.check_box { 
    display:none; 
} 

.check_box + label{ 
    background:url('images/check-box.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

.check_box:checked + label{ 
    background:url('images/check-box-checked.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Answer 3

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

यह मेरा उदाहरण है:

http://jsfiddle.net/kEHGN/1/

असल में, हम निम्नलिखित एचटीएमएल की जरूरत है:

<div class="checkbox_wrapper"> 
    <input type="checkbox" /> 
    <label></label> 
</div> 

और निम्नलिखित सीएसएस:

.checkbox_wrapper{ 
    position: relative; 
    height: 16px; 
    width: 17px; 
} 

input[type="checkbox"] { 
    opacity:0; 
    height: 16px; 
    width: 17px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
} 

input[type="checkbox"] + label{ 
    background:url('../images/unchecked.png') no-repeat; 
    height: 16px; 
    width: 17px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

input[type="checkbox"]:checked + label{ 
    background:url('../images/checked.png') no-repeat; 
    height: 16px; 
    width: 17px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

बस के मार्गों की जाँच छवियों, और चौड़ाई और ऊंचाई चौड़ाई के बराबर होना चाहिए छवियों की ऊंचाई। फिडलर पर मैं बेस 64 एन्कोडेड छवियों का उपयोग कर रहा हूं।

मुझे आशा है कि यह उपयोगी हो सकता है।

Answer 4

यहां अपनी चेकबॉक्स शैली बदलने के लिए एक शुद्ध सीएसएस तरीका है। मैंने इसे वास्तव में उपयोगी पाया, क्योंकि मेरे पास पहले से ही समान चेकबॉक्स से संबंधित अन्य फ़ंक्शन थे।

http://www.jotform.org/html-elements/css-checkbox-background-color/

बीआर के

Answer 5

हो सकता है कि कम से उपयोगी मेरी नमूना होगी।

<div class="custom-checkbox"> 
    <input component="input" type="checkbox"/> 
    <label>Here is caption right to checkbox</label> 
</div> 

    @imgsize: 25px; 
    .custom-checkbox{ 
     position: relative; 

     > input[type="checkbox"] { 

     display:none; 
     position: absolute; 
     top: 0; 
     left: 0; 

      + label{ 

       background:url('../img/unchecked.png') no-repeat 0 0; 
       background-size:@imgsize; 
       height: @imgsize; 
       padding: 4px 0 5px 35px; 
       display: inline-block; 
       -webkit-transition-duration: 0.3s; 
       -moz-transition-duration: 0.3s; 
       transition-duration: 0.3s;   
      } 
     } 
     > input[type="checkbox"]:checked + label{ 

      background:url('../img/checked.png') no-repeat; 
      background-size:@imgsize @imgsize; 
     } 
    } 

Answer 6

मुझे आसन्न लेबल या आसपास के divs का उपयोग किए बिना एक और तरीका मिला।

मेरा उपयोग यह था कि मेरे पास एक मार्कडाउन पार्सर था जो उन निफ्टी TODO सूचियों को उत्पन्न करता था और मैं उन्हें स्टाइल करना चाहता था।

इस तरह एक चेकबॉक्स दिया: बदल रहा है सृजित HTML एक विकल्प नहीं था, इसलिए मैं इस समाधान के साथ आया था

<input type="checkbox" id="cb"> 

आप पर :: के बाद चेकबॉक्स पर visibility: hidden और visibility: visible साथ इसे शैली दे सकते, इस तरह:

#cb { 
 
    visibility: hidden; 
 
} 
 

 
input#cb::after { 
 
    visibility: visible; 
 
    content: "F"; 
 
    color: red; 
 
    background: green; 
 
    padding: 8px; 
 
} 
 

 
input#cb:checked::after { 
 
    content: " T "; 
 
    color: green; 
 
    background: red; 
 
}

<!doctype html> 
 
<html> 
 

 
<body> 
 
    <input type="checkbox" id="cb"> 
 
</body> 
 

 
</html>

चेकबॉक्स बस सामान्य से एक और की तरह काम करता आप जिस तरह से चाहें इसे शैली बना सकते हैं।

शायद यह जावास्क्रिप्ट के बिना someody मदद करेंगे (और मैं, इसे बुकमार्क कर सकते क्योंकि मैं वेब पर इस तरह कुछ भी नहीं मिला है)