सीएसएस चेकबॉक्स इनपुट स्टाइल

Question

inputहर इनपुट तत्व को प्रभावित करने के लिए कोई भी शैली । क्या प्रत्येक चेक बॉक्स तत्व के लिए एक वर्ग को लागू किए बिना केवल चेकबॉक्स के लिए आवेदन करने के लिए स्टाइल को निर्दिष्ट करने का एक तरीका है?

Answer 1

CSS 2 के साथ आप यह कर सकते हैं:

input[type='checkbox'] { ... }

यह अब तक व्यापक रूप से समर्थित होना चाहिए। ब्राउज़रों के लिए समर्थन देखें

Comments

मेरा मानना ​​है कि IE 7 और अधिक समर्थन विशेषता चयनकर्ताओं, जो वास्तव में CSS 2.1 हैं। quirksmode.org/css/contents.html

— TJ L

@realtebo: कई शैलियों (सीमा, पृष्ठभूमि, आदि) को सीधे HTML चेकबॉक्स पर लागू नहीं किया जा सकता है।

— रॉय टिंकर 23

@RoyTinker आप चेकबॉक्स के लिए उपयोग करेंगे outline, नहीं border।

— टायलरएच

Answer 2

मैं लेबल के बिना अपना समाधान बनाता हूं

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

Comments

इस छवि के रूप में ग्रे पृष्ठभूमि के साथ कैसे करें ( i.stack.imgur.com/Q23fy.png ), यदि आप मेरी पोस्ट ( pt.stackoverflow.com/questions/436890/estilarar-checkbox ) पर देख सकते हैं । धन्यवाद।

— टियागो

बहुत खुबस! क्या आप मेरे पोस्ट का उत्तर मेरे लिए चिह्नित करने के लिए रख सकते हैं?

— टिआगो

खोज और परीक्षण के घंटों के बाद यह एकमात्र ऐसी चीज है जो मेरे लिए काम करती है। धन्यवाद!

— मार्क

भयानक उदाहरण

— एड्रियन ग्रिगुटिस

Answer 3

कुछ ऐसा जो मैंने हाल ही में रेडियो बटन्स और चेकबॉक्स स्टाइल करने के लिए खोजा। इससे पहले, मुझे jQuery और अन्य चीजों का उपयोग करना था। लेकिन यह मूर्खतापूर्ण सरल है।

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

तुम्हें पता है, एक चेकबॉक्स के लिए भी ऐसा ही स्पष्ट रूप से बदल सकते हैं input[type=radio]करने के लिए input[type=checkbox]और परिवर्तन border-radius:15px;करने के लिए border-radius:4px;।

आशा है कि यह आपके लिए कुछ उपयोगी है।

Comments

वास्तव में अच्छा है, बहुत बुरा है जो ओपेरा पर इतना काम नहीं करता है और न ही IE = (

— मिशेल आयरेस

यदि आप अपनी खुद की स्टाइल को चेकबॉक्स / इनपुट पर लागू करना चाहते हैं, तो CSS के माध्यम से कस्टम इनपुट तत्वों के बारे में मेरे ब्लॉगपोस्ट को चेक करें । फिर आप इसे स्टाइल कर सकते हैं, लेकिन आप केवल CSS के साथ ही IE8 फॉलबैक सहित चाहें।

— फेलिक्स हाग्सियल

Answer 4

कक्षाएं भी अच्छी तरह से काम करती हैं, जैसे:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

Comments

यह संभव नहीं है कि प्रपत्र के अंदर .checkbox को घोंसला बनाना आवश्यक है क्योंकि आपको किसी प्रपत्र के बाहर एक चेकबॉक्स खोजने की संभावना नहीं है। इसके अलावा .checkbox इनपुट होना चाहिए। चेकबॉक्स

— डंकन वॉकर

@DuncanWalker मैंने इसका परीक्षण नहीं किया है, लेकिन क्या formइनपुट नियंत्रण को डिफ़ॉल्ट सबमिट नियंत्रण से जोड़ने के लिए टैग आवश्यक नहीं होंगे ?

— जिम फेल

@ जिम फेल यह काम नहीं करता। अगर मैं दो अलग-अलग स्टाइल के चेकबॉक्स के लिए दो अलग-अलग कक्षाएं बनाता हूं, तो .checkbox1 [इनपुट = 'चेकबॉक्स'] और। Checkbox2 [इनपुट = 'चेकबॉक्स'], शैली हमेशा दोनों पर प्रभाव डालेगी..क्या आप स्टाइल को अलग करना सुनिश्चित करते हैं?

— क्रिस जूल

@ क्रिस आपको अपने चेकबॉक्स तत्वों को विभिन्न श्रेणी के नाम देने की आवश्यकता है।

— जिम फेल

Answer 5

आप केवल कुछ खास विशेषताओं को ही लागू कर सकते हैं:

input[type="checkbox"] {...}

इसे यहाँ समझाता है ।

Answer 6

input[type="checkbox"] {
 /* your style */
}

लेकिन यह केवल IE7 और उससे नीचे के ब्राउज़रों के लिए काम करेगा, जिनके लिए आपको एक वर्ग का उपयोग करना होगा।

Comments

IE7 के नीचे यह है, IE7 चयनकर्ताओं के साथ ठीक है। परीक्षण किया और यहाँ देखें: kimblim.dk/css-tests/selectors

— Frank Nocke

Answer 7

ट्राइडेंट::-ms-check चेकबॉक्स और रेडियो बटन नियंत्रण के लिए छद्म तत्व प्रदान करता है। उदाहरण के लिए:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

यह विंडोज 8 पर IE10 में निम्नानुसार प्रदर्शित करता है:

Answer 8

जैसा कि IE6 विशेषता चयनकर्ताओं को नहीं समझता है, आप केवल डीन एडवर्ड्स द्वारा IE6 (सशर्त टिप्पणियों के साथ) और jQuery या IE7.js द्वारा देखी गई स्क्रिप्ट को जोड़ सकते हैं ।

IE7 (.js) Microsoft इंटरनेट एक्सप्लोरर को एक मानक-अनुरूप ब्राउज़र की तरह व्यवहार करने के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह कई HTML और CSS समस्याओं को ठीक करता है और IE5 और IE6 के तहत पारदर्शी PNG को सही ढंग से काम करता है।

कक्षाओं या jQuery या IE7.js का उपयोग करने का विकल्प आपकी पसंद-नापसंद और आपकी अन्य जरूरतों (शायद PNG-24 पारदर्शिता पर आपकी साइट पर निर्भर करता है) PNG-8 पर पूरी पारदर्शिता के साथ भरोसा किए बिना है जो IE6 पर 1-बिट पारदर्शिता पर निर्भर करता है। - केवल पटाखे और pngnq, आदि द्वारा बनाई गई)

Answer 9

यद्यपि CSS आपको स्टाइल को चेकबॉक्स प्रकार या किसी अन्य प्रकार के लिए विशिष्ट करने का एक तरीका प्रदान करता है, लेकिन ऐसे ब्राउज़र के साथ समस्याएँ होने वाली हैं जो इसका समर्थन नहीं करते हैं।

मुझे लगता है कि इस मामले में आपका एकमात्र विकल्प आपके चेकबॉक्स पर कक्षाएं लागू करने वाला है।

बस अपने चेकबॉक्स में वर्ग = "चेकबॉक्स" जोड़ें।

फिर उस स्टाइल को अपने css कोड में बनाएं।

एक चीज जो आप कर सकते हैं वह यह है:

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

तो IE विशिष्ट सीएसएस का उपयोग शामिल हैं:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

आपको IE में काम करने के लिए अभी भी कक्षा को जोड़ना होगा, और यह अन्य गैर-IE ब्राउज़र में काम नहीं करेगा जो IE का समर्थन नहीं करता है। लेकिन यह आपकी वेबसाइट को css कोड के साथ फॉरवर्ड-थिंकिंग बना देगा और जैसा कि IE को सपोर्ट मिलता है, आप चेकबॉक्स से css क्लासेस को भी हटा सकते हैं।

Comments

2 स्टाइल शीट के बारे में टिप के लिए धन्यवाद। हालाँकि, मुझे लगता है कि मैं इस तरह की चीज़ से बचने की कोशिश कर रहा हूँ, मैं सिर्फ चेक बॉक्स के लिए एक स्टाइल