स्टाइल स्टाइल/एएसपी की लुक: सीएसएस

Question

का उपयोग कर चेकबॉक्स, मैं मानक 1px कहने के लिए मानक एएसपीनेट चेकबॉक्स के मानक "3 डी" रूप को बदलना चाहता हूं। यदि मैं सीमा के लिए स्टाइल को लागू करने का प्रयास करता हूं उदाहरण के लिए यह केवल इतना करता है - इसके चारों ओर की सीमा के साथ मानक चेकबॉक्स खींचता है - जो मुझे लगता है वैध है।

वैसे भी, क्या वास्तविक टेक्स्टबॉक्स को स्टाइल करने के तरीके को बदलने का कोई तरीका है?

Answer 1

मैं सबसे अच्छा तरीका है चेक बॉक्स बनाने के लिए बिल्कुल चेकबॉक्स नियंत्रण का उपयोग नहीं कर रहा है वास्तव में अलग दिखता है लगता है सीएसएस लिखने के लिए की जरूरत है। हाइपरलिंक या छवि तत्व के शीर्ष पर चेक/अनचेक किए गए राज्य के लिए अपनी खुद की छवियों का बेहतर उपयोग करें। चीयर्स।

Answer 2

सुनिश्चित नहीं हैं कि यह वास्तव में एक asp.net संबंधित सवाल है .. इस एक शॉट, अच्छा जानकारी यहाँ के बहुत सारे दें:

http://www.456bereastreet.com/archive/200409/styling_form_controls/

Answer 3

वे वास्तव में ब्राउज़र पर निर्भर कर रहे हैं।

शायद आप फ़ाइल ब्राउज़ बटन को बदलने के बारे में this प्रश्न में उत्तर के समान कुछ कर सकते हैं।

Answer 4

ध्यान रखें कि एएसपी: चेकबॉक्स नियंत्रण वास्तव में केवल एक ही चेकबॉक्स इनपुट से अधिक आउटपुट करता है।

उदाहरण के लिए, मेरे कोड आउटपुट

<span class="CheckBoxStyle"> 
    <input id="ctl00_cphContent_cbCheckBox" 
      name="ctl00$cphContent$cbCheckBox" 
      type="checkbox"> 
</span> 

जहां CheckBoxStyle नियंत्रण और cbCheckBox के लिए आवेदन किया CssClass विशेषता के मान है नियंत्रण की आईडी है।

इनपुट शैली करने के लिए, आप लक्षित करना

span.CheckBox input { 
    /* Styles here */ 
} 

Answer 5

कुछ गैर मानक नियंत्रण का उपयोग करने के बजाय, आपको क्या करना चाहिए तथ्य के बाद इसे करने के लिए गैर-घुसपैठ जावास्क्रिप्ट का उपयोग करना है। उदाहरण के लिए http://code.google.com/p/jquery-checkbox/ देखें।

मानक एएसपी चेकबॉक्स का उपयोग कोड लिखने को सरल बनाता है। आपको अपना खुद का उपयोगकर्ता नियंत्रण लिखना नहीं है, और आपके सभी मौजूदा कोड/पृष्ठों को अपडेट करने की आवश्यकता नहीं है।

अधिक महत्वपूर्ण बात यह है कि यह एक मानक HTML नियंत्रण है जो सभी ब्राउज़र पहचान सकते हैं। यह सभी उपयोगकर्ताओं के लिए सुलभ है, और अगर उनके पास जावास्क्रिप्ट नहीं है तो काम करें। उदाहरण के लिए, अंधे के लिए स्क्रीन पाठक इसे एक चेकबॉक्स नियंत्रण के रूप में समझ पाएंगे, न केवल एक लिंक के साथ एक छवि।

Answer 6

कस्टम डिज़ाइन के साथ एएसपी चेकबॉक्स नियंत्रण का उपयोग करके सरलतम तरीका।

chkOrder.InputAttributes["class"] = "fancyCssClass"; 

आप ऐसा ही कुछ का उपयोग कर सकते .. उम्मीद है कि मदद करता है

Answer 7

अजाक्स नियंत्रण टूलकिट से उपलब्ध ToggleButtonExtender साथ Asp.net चेक बॉक्स बटन का उपयोग क्यों नहीं।

Answer 8

एएसपी.नेट वेब फॉर्म और बूटस्ट्रैप का उपयोग करते समय उपरोक्त में से कोई भी काम अच्छी तरह से नहीं है।

मैं का उपयोग कर पॉल शेरिफ Simple Bootstrap CheckBox for Web Forms

<style> 
    .checkbox .btn, .checkbox-inline .btn { 
    padding-left: 2em; 
    min-width: 8em; 
    } 
    .checkbox label, .checkbox-inline label { 
    text-align: left; 
    padding-left: 0.5em; 
    } 
    .checkbox input[type="checkbox"]{ 
     float:none; 
    } 
</style> 


<div class="form-group"> 
    <div class="checkbox"> 
     <label class="btn btn-default"> 
      <asp:CheckBox ID="chk1" runat="server" Text="Required" /> 
     </label> 
    </div> 
</div> 

परिणाम इस तरह दिखता है ...

Answer 9

अपने सीएसएस में इस कोड को पेस्ट करें और इसे आप अपने चेकबॉक्स शैली को अनुकूलित करने देगा समाप्त हो गया। हालांकि, यह सबसे अच्छा समाधान नहीं है, यह मौजूदा चेकबॉक्स/रेडियोधटन के शीर्ष पर आपकी शैली को प्रदर्शित करता है।

input[type='checkbox']:after 
{ 

     width: 9px; 
     height: 9px; 
     border-radius: 9px; 
     top: -2px; 
     left: -1px; 
     position: relative; 
     background-color: #3B8054; 
     content: ''; 
     display: inline-block; 
     visibility: visible; 
     border: 3px solid #3B8054; 
     transition: 0.5s ease; 
     cursor: pointer; 

} 

input[type='checkbox']:checked:after 
    { 
     background-color: #9DFF00; 
    }