क्या मैं CSS का उपयोग करके चेकबॉक्स का आकार बदल सकता हूं?

Question

क्या ब्राउज़र में सीएसएस या HTML का उपयोग करके चेकबॉक्स का आकार निर्धारित करना संभव है?

widthऔर sizeIE6 + में काम करते हैं, लेकिन फ़ायरफ़ॉक्स के साथ नहीं, जहां चेकबॉक्स 16x16 रहता है, भले ही मैं एक छोटा आकार सेट करूं।

Comments

यह क्रॉस-ब्राउज़र करना कठिन है। रोजर जोहानसन ने बड़े पैमाने पर इसकी जांच की है ।

— बजे क्रिस्टियान लिबार्डो

सभी टिप्पणियों को पढ़ना - सीएसएस को शामिल किए बिना वास्तव में एक सरल तरीका है: <इनपुट प्रकार = "चेकबॉक्स" नाम = "चेकबॉक्सनाम" मूल्य = "पर" शैली = "चौड़ाई: 110%; ऊंचाई: 110%">

— विलियमज 902

इस सरल ans का उपयोग करें: stackoverflow.com/questions/57805394/…

— Pritesh

Answer 1

यह थोड़ा बदसूरत है (स्केलिंग के कारण), लेकिन यह अधिकांश नए ब्राउज़रों पर काम करता है:

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
  Option C
</span>

Comments

यह सही उत्तर लगता है क्योंकि एक के रूप में चिह्नित जवाब कई मामलों में कोई समाधान नहीं देता है (xp पर फ़ायरफ़ॉक्स का कोई समाधान नहीं? कोई क्रोम बिल्कुल भी नहीं?), पुराना है और केवल एक लिंक और बहुत अधिक मूल्य की टिप्पणी नहीं है।

— nurettin

इस उत्तर के लिए @jdw +1 और यहां तक ​​कि मुझे ऐसा करने की आवश्यकता थी और आपका उत्तर सहायक था। लेकिन किसी तरह मुझे लगता है कि 'स्केल्ड' चेकबॉक्स थोड़ा विकृत दिखाई देता है। मुझे नहीं पता कि यह एफएफ या मेरे ओएस (उबंटू 12.04) के साथ कोई बात है। वैसे भी धन्यवाद :)

— इसकी रात

स्केल () को क्रोम के लिए 2 मापदंडों की आवश्यकता है, एफएफ और आईई मुझे लगता है। इसलिए यदि आप सभी पैमानों को बदलकर स्केल (2,2) कर दें तो यह हर ब्राउजर के लिए काम करना चाहिए।

— ऑनूर टॉपल

जोड़ने के transform: scale(2);भी, किसी भी ब्राउज़र के लिए और अधिक सुनिश्चित करने के लिए

— एड्रियानो रेसेंडे

स्केलिंग खौफनाक लगता है, 2 पैमाने पर आप पहले से ही अलग-अलग पिक्सेल देखते हैं। मैं सुंदर बड़े सीएसएस चेकबॉक्स के लिए इस समाधान को कभी नहीं चुनूंगा।

— बेसजेरो

Answer 2

सभी आधुनिक ब्राउज़रों के लिए कार्य समाधान।

input[type=checkbox] {
    transform: scale(1.5);
}

<label><input type="checkbox"> Test</label>

---

संगतता:

• IE: 10+
• एफएफ: 16+
• क्रोम: 36+
• सफारी: 9+
• ओपेरा: 23+
• iOS सफारी: 9.2+
• Android के लिए Chrome: 51+

---

प्रकटन:

• Chrome 58 (मई 2017), विंडोज 10

Comments

क्या यह पुराने ब्राउज़रों को कवर करता है जैसे 8?

— हुआंगिज़्म

@ धर्मवाद नहीं, उपरोक्त कोड का IE 8 में कोई प्रभाव नहीं होगा जो transformसंपत्ति का समर्थन नहीं करता है। IE 9 का समर्थन करता है -ms-transformजिसका आप उपयोग कर सकते हैं, हालांकि कुछ लोग कहते हैं कि यह काफी पिक्सेलयुक्त है इसलिए डिफ़ॉल्ट रूप से IE 9 को छोड़ना बेहतर हो सकता है।

— साइमन ईस्ट

ऊपर दृष्टिकोण बुरा नहीं है, क्योंकि इसमें स्केल की सीमा है क्योंकि यह चेकबॉक्स को पिक्सेलेट किया जाता है।

— ऋषिअगर

MacOS 10.13.3 के साथ Chrome 64 पर अत्यधिक पिक्सेलयुक्त :( timo-ernst.net/misc/zeug/cb-pixel.jpg

— Timo

अभी भी क्रोम 76 पर पिक्सेलित है।

— लैब्राडोर

Answer 3

एक आसान उपाय संपत्ति का उपयोग करना है zoom:

input[type="checkbox"] {
    zoom: 1.5;
}

<input type="checkbox" />

Comments

यह सुनिश्चित नहीं है कि यह सभी ब्राउज़रों में काम करता है, लेकिन यह स्केल ट्रांसफॉर्मेशन सॉल्यूशन की तुलना में स्क्रीन पर पहले जैसा दिखता है।

— Gwened

MacOS 10.13.3 के साथ क्रोम 64 पर यह ट्रांसफ़ॉर्म + स्केल का उपयोग करने की तुलना में कम पिक्सेलयुक्त लगता है

— टिमो

अत्यधिक मोज़िला द्वारा हतोत्साहित किया गया। developer.mozilla.org/en-US/docs/Web/CSS/zoom

— व्यापार-विचार फिलिप

यह दिलचस्प है कि मोज़िला इसे हतोत्साहित कर रहा है जबकि फ़ायरफ़ॉक्स लगभग एकमात्र ऐसा ब्राउज़र है जो इसका समर्थन नहीं करता है: caniuse.com/#feat=css-zoom

— ndreisg

Answer 4

2020 संस्करण - छद्म तत्वों का उपयोग करके, आकार फ़ॉन्ट आकार पर निर्भर करता है।

डिफ़ॉल्ट चेकबॉक्स / रेडियो स्क्रीन के बाहर प्रदान किया जाता है, लेकिन CSS वर्चुअल तत्वों को डिफ़ॉल्ट तत्वों के समान बनाता है। सभी ब्राउज़रों का समर्थन करता है, कोई धब्बा नहीं। आकार फ़ॉन्ट आकार पर निर्भर करता है। कीबोर्ड क्रिया (स्थान, टैब) भी समर्थित हैं।

https://jsfiddle.net/ohf7nmzy/2/

body{
	padding:0 20px;
}
.big{
	font-size: 50px;
}

/* CSS below will force radio/checkbox size be same as font size */
label{
	position: relative;
	line-height: 1.4;
}
/* radio */
input[type=radio]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=radio] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 50%;
	background-color: #bbbbbb;
}
input[type=radio] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
	border: 0.2em solid #8eb9fb;
	margin-top: -0.2em;
	margin-left: -0.2em;
	box-shadow: 0 0 0.3em #3b88fd;
}


/*checkbox/*/
input[type=checkbox]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 10%;
	background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 10%;
	transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
	position: absolute;
	content: "\2713";
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
	border-radius: 10%;
	color: white;
	text-align: center;
	line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
	border: 0.1em solid #8eb9fb;
	margin-top: -0.1em;
	margin-left: -0.1em;
	box-shadow: 0 0 0.2em #3b88fd;
}

<input type="checkbox" name="checkbox_1" id="ee" checked /> 
<label for="ee">Checkbox small</label>

<br />

<input type="checkbox" name="checkbox_2" id="ff" /> 
<label for="ff">Checkbox small</label>

<hr />

<div class="big">
	<input type="checkbox" name="checkbox_3" id="gg" checked /> 
	<label for="gg">Checkbox big</label>

	<br />

	<input type="checkbox" name="checkbox_4" id="hh" /> 
	<label for="hh">Checkbox big</label>
</div>


<hr />


<input type="radio" name="radio_1" id="aa" value="1" checked /> 
<label for="aa">Radio small</label>

<br />

<input type="radio" name="radio_1" id="bb" value="2" /> 
<label for="bb">Radio small</label>

<hr />

<div class="big">
	<input type="radio" name="radio_2" id="cc" value="1" checked /> 
	<label for="cc">Radio big</label>

	<br />

	<input type="radio" name="radio_2" id="dd" value="2" /> 
	<label for="dd">Radio big</label>
</div>

2017 संस्करण - ज़ूम या स्केल का उपयोग करना

zoomयदि यह समर्थित (अच्छी गुणवत्ता) या मानक transform: scale(धुंधली) है तो ब्राउज़र गैर-मानक सुविधा का उपयोग करेगा ।

स्केलिंग सभी ब्राउज़रों पर काम करती है, लेकिन यह फ़ायरफ़ॉक्स और सफारी पर धुंधली होगी ।

https://jsfiddle.net/ksvx2txb/11/

@supports (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
	zoom: 2;
	}
}
@supports not (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
		transform: scale(2);
		margin: 15px;
	}
}
label{
  /* fix vertical align issues */
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
}

<input type="radio" name="aa" value="1" id="aa" checked /> 
<label for="aa">Radio 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" /> 
<label for="bb">Radio 2</label>

<br /><br />

<input  type="checkbox" name="optiona" id="cc" checked /> 
<label for="cc">Checkbox 1</label>
<br />
<input  type="checkbox" name="optiona" id="dd" /> 
<label for="dd">Checkbox 1</label>

Comments

ज़ूम ऐसा लगता है कि यह FQ पर ठीक काम करता है। शायद गेको के पुराने संस्करणों के लिए बाहर देखो?

— नील चौधरी

Answer 5

मैं इसके साथ बाहर आया:

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐";}
input:checked + label:before {content:"☑";}
label:hover {color:blue;}

<input id="check" type="checkbox" /><label for="check">Checkbox</label>

बेशक, इसके लिए धन्यवाद, आप contentअपनी आवश्यकताओं के मूल्य को बदल सकते हैं और एक छवि का उपयोग कर सकते हैं यदि आप चाहें या किसी अन्य फ़ॉन्ट का उपयोग कर सकते हैं ...

यहाँ मुख्य रुचि यह है कि:

1. चेकबॉक्स का आकार पाठ के आकार के अनुपात में रहता है

2. आप चेकबॉक्स के पहलू, रंग, आकार को नियंत्रित कर सकते हैं

3. कोई अतिरिक्त HTML की आवश्यकता नहीं है!

4. CSS की केवल 3 पंक्तियों की आवश्यकता है (अंतिम केवल आपको विचार देने के लिए है)

संपादित करें : जैसा कि टिप्पणी में बताया गया है, चेकबॉक्स कुंजी नेविगेशन द्वारा सुलभ नहीं होगा। आपको tabindex=0अपने लेबल को ध्यान केंद्रित करने के लिए संभवतः एक संपत्ति के रूप में जोड़ना चाहिए ।

Comments

दुर्भाग्य से, display:noneइनपुट पर सेटिंग इसे tabकुंजी के साथ चयनित होने से रोकेगी इसलिए मुझे नहीं लगता कि यह एक अच्छा विचार है।

— हरफांक

अच्छी टिप्पणी है। इसे ठीक करने के लिए आप इनपुट पर tabindex = 0 जोड़ सकते हैं।

— शरकौक्स

Answer 6

पूर्वावलोकन:
http://jsfiddle.net/h4qka9td/

*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch {
  margin: 50px auto;
  position: relative;
}

.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* DEMO 3 */

.switch.demo3 {
  width: 180px;
  height: 50px;
}

.switch.demo3 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #a5a39d;
  border-radius: 40px;
  box-shadow:
      inset 0 3px 8px 1px rgba(0,0,0,0.2),
      0 1px 0 rgba(255,255,255,0.5);
}

.switch.demo3 label:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: inherit;
  background: #ababab;
  background: -moz-linear-gradient(#f2f2f2, #ababab);
  background: -ms-linear-gradient(#f2f2f2, #ababab);
  background: -o-linear-gradient(#f2f2f2, #ababab);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}

.switch.demo3 label:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18px; right: -18px; bottom: -18px; left: -18px;
  border-radius: inherit;
  background: #eee;
  background: -moz-linear-gradient(#e5e7e6, #eee);
  background: -ms-linear-gradient(#e5e7e6, #eee);
  background: -o-linear-gradient(#e5e7e6, #eee);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
  background: -webkit-linear-gradient(#e5e7e6, #eee);
  background: linear-gradient(#e5e7e6, #eee);
  box-shadow:
      0 1px 0 rgba(255,255,255,0.5);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}

.switch.demo3 label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
  background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
  background: -o-linear-gradient(#f7f2f6, #b2ac9e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
  background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
      inset 0 1px 0 white,
      0 0 8px rgba(0,0,0,0.3),
      0 5px 5px rgba(0,0,0,0.2);
}

.switch.demo3 label i:after {
  content: "";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
  background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
  background: -o-linear-gradient(#cbc7bc, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
  background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}

.switch.demo3 label i:before {
  content: "off";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color: rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: -50%;
}

.switch.demo3 input:checked ~ label {
  background: #9abb82;
}

.switch.demo3 input:checked ~ label i {
  right: -1%;
}

.switch.demo3 input:checked ~ label i:before {
  content: "on";
  right: 115%;
  color: #82a06a;
  text-shadow: 
    0 1px 0 #afcb9b,
    0 -1px 0 #6b8659;
}

<div class="switch demo3">
  <input type="checkbox">
  <label><i></i>
  </label>
</div>

<div class="switch demo3">
  <input type="checkbox" checked>
  <label><i></i>
  </label>
</div>

Comments

@robertjd सहमत थे, इस बात को लेकर असमंजस में थे कि एक साधारण बदलाव के लिए इसकी आवश्यकता क्यों पड़ेगी

— नील चौधरी

@robertjd वे भी चेकबॉक्स नहीं हैं; वे टॉगल कर रहे हैं।

— टाइलर

Answer 7

चेकबॉक्स की उपस्थिति डिफ़ॉल्ट रूप से तय की गई लगती है। लेकिन जैसा कि वर्थ 7 ने बताया है कि सीएसएस appearanceसंपत्ति का उपयोग करके इसे फिर से बनाया जा सकता है । यह चेकबॉक्स को पूरी तरह से खाली कर देगा, जिससे आप अपनी उपस्थिति को परिभाषित कर सकते हैं। इसके बारे में क्या अच्छा है: आप अपने मौजूदा HTML कोड का उपयोग कर सकते हैं। डाउनसाइड: यह प्रायोगिक तकनीक है । एज और IE कस्टम शैली का उपयोग नहीं करते हैं।

यहाँ आवश्यक सीएसएस शैलियों हैं:

input[type=checkbox] {
    width: 14mm;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 14mm;
    border: 0.1mm solid black;
}

input[type=checkbox]:checked {
    background-color: lightblue;
}

input[type=checkbox]:checked:after {
    margin-left: 4.3mm;
    margin-top: -0.4mm;
    width: 3mm;
    height: 10mm;
    border: solid white;
    border-width: 0 2mm 2mm 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}

<label><input type="checkbox"> Test</label>

स्क्रीनशॉट:

क्रोम:

फ़ायरफ़ॉक्स:

एज:

अर्थात:

Answer 8

मैं एक चेकबॉक्स बनाने के लिए देख रहा था जो अभी थोड़ा बड़ा था और निम्नलिखित समाधान को खोजने के लिए 37Signals Basecamp के स्रोत कोड को देखा-

आप चेकबॉक्स को थोड़ा बड़ा करने के लिए फ़ॉन्ट आकार बदल सकते हैं:

font-size: x-large;

फिर, आप चेकबॉक्स को ठीक से संरेखित कर सकते हैं:

vertical-align: top;
margin-top: 3px; /* change to center it */

Comments

फ़ॉन्ट-आकार वास्तविक चेकबॉक्स के आकार को बिल्कुल प्रभावित नहीं करता है

— माइकल

मेरे लिए काम नहीं किया

— Amirhossein Tarmast

Answer 9

आप सफारी में चेकबॉक्स को बड़ा कर सकते हैं - जो आम तौर पर सामान्य दृष्टिकोणों के लिए प्रतिरोधी है - इस विशेषता के साथ: -webkit-transform: scale(1.3, 1.3);

स्रोत

Answer 10

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

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    font-size: 14px;
    background-color: #eee;
}

input[type=checkbox]:checked:after {
    position: relative;
    bottom: 3px;
    left: 1px;
    color: blue;
    content: "\2713"; /* check mark */
}

जैसा कि इस पोस्ट में बताया गया है, ज़ूम प्रॉपर्टी फ़ायरफ़ॉक्स पर काम नहीं करती है, और ट्रांसफ़ॉर्म अवांछित प्रभाव पैदा कर सकती है।

क्रोम और फ़ायरफ़ॉक्स पर परीक्षण किया गया, सभी आधुनिक ब्राउज़रों के लिए काम करना चाहिए। बस अपनी आवश्यकताओं के लिए गुणों (रंग, आकार, नीचे, बाएं, आदि) को बदलें। आशा है ये मदद करेगा!

Answer 11

मेरी समझ यह है कि क्रॉस-ब्राउज़र करना आसान नहीं है। चेकबॉक्स नियंत्रण में हेरफेर करने की कोशिश करने के बजाय, आप हमेशा छवियों, जावास्क्रिप्ट और छिपे हुए इनपुट क्षेत्रों का उपयोग करके अपने स्वयं के कार्यान्वयन का निर्माण कर सकते हैं। मैं मान रहा हूं कि यह वही है जो अच्छा है (स्टैकु लोनट के उत्तर से ऊपर), लेकिन इसे लागू करना विशेष रूप से मुश्किल नहीं होगा। मेरा मानना ​​है कि jQuery के पास इस कस्टम व्यवहार के लिए अनुमति देने के लिए एक प्लगइन है (यदि मैं इसे पा सकता हूं तो लिंक और पोस्ट की तलाश करूंगा)।

Answer 12

मुझे यह CSS-only लाइब्रेरी बहुत मददगार लगी: https://lokesh-coder.github.io/pretty-echeck//

या, आप अपनी उसी मूल अवधारणा के साथ अपना रोल कर सकते हैं, जो @Sharcoux के समान है। यह मूल रूप से है:

• सामान्य चेकबॉक्स छिपाएं (अपारदर्शिता 0 और जहां इसे रखा जाएगा)
• एक सीएसएस-आधारित नकली चेकबॉक्स जोड़ें
• input:checked~div labelजाँच की शैली के लिए उपयोग करें
• सुनिश्चित करें कि आपका <label>उपयोग करने योग्य हैfor=yourinputID

.pretty {
  position: relative;
  margin: 1em;
}
.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.pretty-inner {
  box-sizing: border-box;
  position: relative;
}
.pretty-inner label {
  position: initial;
  display: inline-block;
  font-weight: 400;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px);
}
.pretty-inner label:after,
.pretty-inner label:before {
  content: '';
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
}
.pretty-inner label:before {
  border-color: #bdc3c7;
}
.pretty input:checked~.pretty-inner label:after {
  background-color: #00bb82;
  width: calc(1em - 6px);
  height: calc(1em - 6px);
  top: 4px;
  left: 4px;
}


/* Add checkmark character style */
.pretty input:checked~.pretty-inner.checkmark:after {
  content: '\2713';
  color: #fff;
  position: absolute;
  font-size: 0.65em;
  left: 6px;
  top: 3px;
}



body {
  font-size: 20px;
  font-family: sans-serif;
}

<div class="pretty">
	<input type="checkbox" id="demo" name="demo">
	<div class="pretty-inner"><label for="demo">I agree.</label></div>
</div>

<div class="pretty">
	<input type="checkbox" id="demo" name="demo">
	<div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div>
</div>

Answer 13

समस्या यह है कि फ़ायरफ़ॉक्स चौड़ाई और ऊँचाई को नहीं सुनता है। अक्षम करें और जाने के लिए आपका अच्छा है।

input[type=checkbox] {
    width: 25px;
    height: 25px;
    -moz-appearance: none;
}

<label><input type="checkbox"> Test</label>

Answer 14

अन्य जवाबों में एक पिक्सेल वाला चेकबॉक्स दिखा, जबकि मैं कुछ सुंदर चाहता था। परिणाम इस तरह दिखता है:

हालांकि यह संस्करण अधिक जटिल है, मुझे लगता है कि यह कोशिश करने के लायक है।

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;
}
.checkbox-list__item:last-of-type {
  border-bottom: 0;
}

.checkbox-list__check {
  width: 18px;
  height: 18px;
  border: 3px solid #b4bcc2;
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -12px;
  transition: border .3s ease;
  border-radius: 5px;
}
.checkbox-list__check:before {
  position: absolute;
  display: block;
  width: 18px;
  height: 22px;
  top: -2px;
  left: 0px;
  padding-left: 2px;
  background-color: transparent;
  transition: background-color .3s ease;
  content: '\2713';
  font-family: initial;
  font-size: 19px;
  color: white;
}

input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;
}
input[type="checkbox"]:checked ~ .checkbox-list__check:before {
  background-color: #5bc0de;
}

<label class="checkbox-list__item">
  <input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;">
  <div class="checkbox-list__check"></div>
</label>

JSFiddle: https://jsfiddle.net/asbd4hpr/

Answer 15

आप नीचे दिए गए कोड में ऊंचाई और चौड़ाई का विवरण कर सकते हैं

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius:5px;
    border:1px solid #ff7e02;
}

<div class="check">

     <label class="container1">Architecture/Landscape
										  

    <input type="checkbox" checked="checked">
										  

    <span class="checkmark"></span>
								 

	</label>
</div>