एकाधिक-चयन बॉक्स

Question

मेरी समझ यह है कि मटेरियलाइज स्टाइल किए गए एकाधिक-चयन बॉक्स का समर्थन नहीं करता है - आपको ब्राउज़र-डिफ़ॉल्ट निर्दिष्ट करना है और स्टाइलिंग का उपयोग नहीं करना है। (मुझे ठीक कर लें मैं गलत हूँ)

तो मैं इस तरह लटकती अंदर चेक बॉक्स के साथ अमल में लाना लटकती साथ एक बराबर बनाने के लिए कोशिश की है:

<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true"> 
Relates to topics...</a> 
<ul id='topics_dropdown' class='dropdown-content'> 
    <li> 
     <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" /> 
     <label for="report_topics_409928004">Engagement</label> 
    </li> 
    <li> 
     <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" /> 
     <label for="report_topics_669658064">Appraisal</label> 
    </li> 

    <!-- etc. --> 

</ul> 

लेकिन वहाँ यह कैसे गाया जाता है में एक गड़बड़ है। पाठ और बक्से आधे रेखा से नीचे की ओर आते हैं, इसलिए हाइलाइटिंग होवर प्रभाव एक आयत को हाइलाइट करता है जो दो अलग-अलग विकल्पों को ओवरलैप करता है। क्या इस गड़बड़ी को ठीक करने का कोई तरीका है?

यहां एक स्क्रीनशॉट है। यह उपरोक्त उदाहरण कोड के समान सामग्री नहीं है लेकिन यह वही ड्रॉपडाउन-चेकबॉक्स संरचना है।

Answer 1

मेरे वैकल्पिक हल के बजाय ड्रॉपडाउन सूची संरचना

<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true"> Relates to topics...</a> 
<div id='topics_dropdown' class='dropdown-content'> 
    <div> 
     <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" /> 
     <label for="report_topics_409928004">Engagement</label> 
    </div> 
    <div> 
     <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" /> 
     <label for="report_topics_669658064">Appraisal</label> 
    </div> 

    <!-- etc. --> 

</div> 

यह मंडराना प्रभाव नहीं पड़ता है का उपयोग करने से लटकती अंदर अपनी ही div में प्रत्येक बॉक्स डाल करने के लिए किया गया है, लेकिन यह काम करता है ।

Answer 2

[type="checkbox"]+label { 
    display: inline; 
}