আমি কি সিএসএস ব্যবহার করে চেকবক্সের আকার পরিবর্তন করতে পারি?

Question

ব্রাউজারগুলি জুড়ে সিএসএস বা এইচটিএমএল ব্যবহার করে কোনও চেকবক্সের আকার নির্ধারণ করা সম্ভব?

widthএবং sizeআই 6+ এ কাজ করে তবে ফায়ারফক্সের সাথে নয়, যেখানে আমি আরও ছোট আকার সেট করে নিলেও চেকবক্সটি 16x16 থাকে।

Comments

ক্রস ব্রাউজারটি করা এটি কঠিন। রজার জোহানসন এটি বরং ব্যাপকভাবে তদন্ত করেছেন।

— ক্রিশ্চিয়ান লিবার্ডো

সমস্ত মন্তব্য পড়া - CSS জড়িত না করে এটি করার সত্যিই সহজ উপায় রয়েছে: <ইনপুট টাইপ = "চেকবক্স" নাম = "চেকবক্সনাম" মান = "স্টাইল =" প্রস্থ: 110%; উচ্চতা: 110% ">

— উইলিয়ামজ 902

এই সাধারণ উত্তরগুলি

— প্রশ্নগুলি

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

এটি সঠিক উত্তর বলে মনে হচ্ছে কারণ উত্তর হিসাবে চিহ্নিত হিসাবে এটি অনেক ক্ষেত্রেই কোনও সমাধান দেয় না (এক্সপিতে ফায়ারফক্সের কোনও সমাধান নেই? কোনও ক্রোমও নেই?), পুরানো এবং এতে কেবল একটি লিঙ্ক এবং বেশি মূল্য নয় বলে একটি মন্তব্য রয়েছে।

— নুরেটিন

এই জবাবটির জন্য @jdw +1 এবং এমনকি আমার এটি করার প্রয়োজন ছিল এবং আপনার উত্তরটি সহায়ক ছিল। তবে একরকম আমি দেখতে পেলাম যে 'স্কেলড' চেকবক্সটি কিছুটা বিকৃত দেখা যাচ্ছে। আমি জানি না এটি এফএফ বা আমার ওএস (উবুন্টু 12.04) এর সাথে কোনও জিনিস কিনা। যাইহোক ধন্যবাদ :)

— itol

ক্রোম, এফএফ এবং আইই এর জন্য স্কেল () এর 2 টি পরামিতি প্রয়োজন needs সুতরাং আপনি যদি কেবলমাত্র সমস্ত স্কেলগুলি স্কেল (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+
• আইওএস সাফারি: 9.2+
• অ্যান্ড্রয়েডের জন্য ক্রোম: 51+

---

চেহারা:

• ক্রোম 58 (মে 2017), উইন্ডোজ 10

Comments

এটি কি 8 বছরের মতো পুরানো ব্রাউজারগুলি কভার করে?

— হুয়াংিজম

@ হুয়াংিজম না, উপরের কোডটি আইই 8-তে কোনও প্রভাব ফেলবে না যা transformসম্পত্তি সমর্থন করে না । আইই 9 আপনাকে সমর্থন -ms-transformকরতে পারে যা সমর্থন করতে পারে, তবে কেউ কেউ এটি বেশ পিক্সেলাইটেড বলে তাই ডিফল্ট সহ আইই 9 ত্যাগ করা ভাল।

— সাইমন পূর্ব

উপরে দৃষ্টিভঙ্গি খারাপ নয়, কারণ স্কেলের জন্য একটি সীমা রয়েছে কারণ এটি চেকবক্সকে পিক্সেলেটেড করে তোলে।

— ishষিআগর

ক্রোম on৪ তে ম্যাকোস 10.13.3 :(

— টিমো-

এখনও ক্রোম 76. উপর pixelated

— ল্যাব্রাডোর

Answer 3

একটি সহজ সমাধান সম্পত্তি ব্যবহার করা হয় zoom:

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

<input type="checkbox" />

Comments

এটি সমস্ত ব্রাউজারে কাজ করে তা নিশ্চিত নয়, তবে স্কেল ট্রান্সফর্ম সলিউশনের চেয়ে পর্দায় এটি সুন্দর দেখায়।

— বেড়েছে

ম্যাকোস 10.13.3 সহ ক্রোম On৪ এ ট্রান্সফর্ম + স্কেল ব্যবহারের চেয়ে কম পিক্সেলিটেড দেখাচ্ছে

— টিমো

মজিলা অত্যন্ত নিরুৎসাহিত। বিকাশকারী.মোজিলা.আর.ইন-

— ট্রেড-আইডিয়াস ফিলিপ

এটি মজার বিষয় যে মজিলা এটি নিরুৎসাহিত করছে, যদিও ফায়ারফক্স প্রায় একমাত্র ব্রাউজার যা এটি সমর্থন করে না: caniuse.com/#feat=css-zoom

— ndreisg

Answer 4

2020 সংস্করণ - সিউডো-উপাদান ব্যবহার করে, আকার হরফ আকারের উপর নির্ভর করে।

ডিফল্ট চেকবক্স / রেডিও স্ক্রিনের বাইরে রেন্ডার করা হয়, তবে সিএসএস ভার্চুয়াল উপাদানগুলি ডিফল্ট উপাদানগুলির মতোই তৈরি করে। সমস্ত ব্রাউজার সমর্থন করে, কোনও ঝাপসা নেই। আকার হরফ আকারের উপর নির্ভর করে। কীবোর্ড ক্রিয়া (স্থান, ট্যাব) এছাড়াও সমর্থিত।

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

জুম দেখে মনে হচ্ছে এটি এফকিউতে দুর্দান্ত কাজ করে। সম্ভবত গেকোর পুরানো সংস্করণগুলি সন্ধান করবেন?

— নীল চৌধুরী

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. কোন অতিরিক্ত এইচটিএমএল প্রয়োজন!

4. সিএসএসের কেবল তিনটি লাইনের প্রয়োজন (শেষটি কেবল আপনাকে ধারণা দেওয়ার জন্য)

সম্পাদনা : মন্তব্যে উল্লিখিত হিসাবে, চেকবাক্স কী নেভিগেশন দ্বারা অ্যাক্সেসযোগ্য হবে না। tabindex=0আপনার লেবেলটিকে আকর্ষণীয় করে তুলতে আপনার সম্ভবত সম্পত্তি হিসাবে যুক্ত করা উচিত ।

Comments

দুর্ভাগ্যক্রমে, ইনপুটটিতে সেট display:noneকরা এটিকে tabকী দিয়ে নির্বাচন করা বাধা দেবে তাই আমি মনে করি এটি ভাল ধারণা নয়।

— Harfangk

ভাল মন্তব্য। এটি ঠিক করতে আপনি ইনপুটটিতে ট্যাবিনডেক্স = 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

@ আরবার্টজেড একমত হয়েছেন, কেন সরল রূপান্তরের জন্য কেন এটির প্রয়োজন হবে তা নিয়ে বিভ্রান্ত ছিলেন

— নীল চৌধুরী

@ আরবার্টজডি এগুলি এমনকি চেকবক্সও নয়; তারা টগলস হয়।

— টাইলারহ

Answer 7

চেকবাক্সগুলির উপস্থিতি ডিফল্টরূপে স্থির হয়েছে বলে মনে হচ্ছে। তবে ওয়ার্থি 7 দ্বারা চিহ্নিত হিসাবে এটি CSS appearanceসম্পত্তি ব্যবহার করে প্রতিকার করা যেতে পারে । এটি চেকবক্সগুলি সম্পূর্ণ খালি করে দেবে, যাতে আপনি নিজের চেহারাটি নির্ধারণ করতে পারেন। এটি সম্পর্কে দুর্দান্ত কী: আপনি আপনার বিদ্যমান এইচটিএমএল কোডটি ব্যবহার করতে পারেন। ডাউনসাইড: এটি পরীক্ষামূলক প্রযুক্তি । এজ এবং আইটি কাস্টম স্টাইল ব্যবহার করে না।

এখানে প্রয়োজনীয় সিএসএস শৈলী রয়েছে:

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

আমি একটি চেকবক্স তৈরি করতে চেয়েছিলাম যা কিছুটা বড় ছিল এবং নীচের সমাধানটি সন্ধানের জন্য 37 সিগন্যাল বেসক্যাম্পের উত্স কোডের দিকে তাকিয়েছিলাম-

চেকবক্সটি কিছুটা বড় করতে আপনি ফন্টের আকার পরিবর্তন করতে পারেন:

font-size: x-large;

তারপরে, আপনি চেকবক্সটি সঠিকভাবে সারিবদ্ধ করতে পারেন:

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

Comments

ফন্ট-আকারটি মোটেও আসল চেকবক্সের আকারকে প্রভাবিত করে না বলে মনে হচ্ছে

— মাইকেল

আমার জন্য কাজ করেনি

— আমিরহোসেইন টারমাস্ট

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

আমি এই সিএসএস-শুধুমাত্র লাইব্রেরিটি খুব সহায়ক বলে মনে করেছি: https://lokesh-coder.github.io/ ব্যাখ্যা ty- checkbox/

অথবা, আপনি এই একই বুনিয়াদি ধারণার সাথে আপনার নিজের রোল করতে পারেন, @ শারকক্স যা পোস্ট করেছেন তার মতো। এটি মূলত:

• সাধারণ চেকবাক্সটি লুকান (অস্বচ্ছতা 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>

জেএসফিডাল: 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>