এমএল - কিভাবে html তৈরি করা যায়




কিভাবে সিএসএস ব্যবহার করে একটি চেকবক্স শৈলী? (18)

আমি নিম্নলিখিত ব্যবহার করে একটি চেকবক্স স্টাইল করার চেষ্টা করছি:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

কিন্তু শৈলী প্রয়োগ করা হয় না। চেকবক্স এখনও তার ডিফল্ট শৈলী প্রদর্শন করে। আমি কিভাবে এটি নির্দিষ্ট শৈলী দিতে পারি?


কোন জাভাস্ক্রিপ্ট বা Jquery প্রয়োজন

আপনার চেকবক্স স্টাইল সহজ উপায় পরিবর্তন করুন।

এইচটিএমএল

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

সিএসএস

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url(http://imgh.us/uncheck.png);
  width: 49px;
  height: 49px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label span {
  background: url(http://imgh.us/check_2.png);
  width: 49px;
  height: 49px;
  vertical-align: middle;
}

এখানে জেসফিল্ড লিঙ্কটি রয়েছে: https://jsfiddle.net/05y2bge3/


সহজ এবং সহজে কাস্টমাইজ করার সমাধান সহজ

অনুসন্ধান এবং পরীক্ষার অনেক পরে আমি এই সমাধানটি বাস্তবায়ন করা সহজ এবং কাস্টমাইজ করা সহজ। এই সমাধান :

  1. আপনি বাইরের লাইব্রেরি এবং ফাইল প্রয়োজন হয় না
  2. আপনি আপনার পৃষ্ঠায় অতিরিক্ত এইচটিএমএল যোগ করার প্রয়োজন নেই
  3. আপনি চেকবক্স নাম এবং আইডি পরিবর্তন করতে হবে না

সহজ আপনার পৃষ্ঠার শীর্ষে প্রবাহিত সিএসএস রাখুন এবং সমস্ত চেকবক্স শৈলী এই মত পরিবর্তন হবে:

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

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

আমার সমাধান

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>


আপডেট: নীচের উত্তরটি CSS3 এর বিস্তৃত প্রাপ্যতা আগে জিনিসগুলির বিষয় উল্লেখ করে। আধুনিক ব্রাউজারগুলিতে (ইন্টারনেট এক্সপ্লোরার 9 এবং পরবর্তী সহ) এটি জাভাস্ক্রিপ্ট ব্যবহার না করে আপনার পছন্দের স্টাইলিংয়ের সাথে চেকবাক্স প্রতিস্থাপন তৈরি করতে আরও সহজতর।

এখানে কিছু দরকারী লিঙ্ক রয়েছে:

এটা মৌলিক বিষয় পরিবর্তন করা হয়েছে যে নোট মূল্য। আপনি এখনও চেকবক্স উপাদানগুলিতে শৈলী (সীমানা, ইত্যাদি) প্রয়োগ করতে পারবেন না এবং সেই শৈলীগুলি HTML চেকবাক্সের প্রদর্শনকে প্রভাবিত করে। যাইহোক, পরিবর্তিত হয়েছে, এটি প্রকৃত চেকবক্সটি লুকাতে এবং এটি নিজের নিজের স্টাইলযুক্ত উপাদান দিয়ে প্রতিস্থাপন করা এখন, সিএসএস ব্যতীত কিছুই ব্যবহার করা সম্ভব নয়। বিশেষ করে, কারণ সিএসএস এখন ব্যাপকভাবে সমর্থিত হয়েছে :checked নির্বাচিত নির্বাচক, আপনি আপনার প্রতিস্থাপনটি সঠিকভাবে বাক্সের চেক করা স্থিতি প্রতিফলিত করতে পারেন।

পুরোনো উত্তর

এখানে স্টাইলিং চেকবক্স সম্পর্কে একটি দরকারী নিবন্ধ । মূলত যে লেখক খুঁজে পেয়েছেন যে এটি ব্রাউজার থেকে ব্রাউজারে প্রচুর পরিমাণে পরিবর্তিত হয়েছে, এবং যেগুলি ব্রাউজারগুলি সর্বদা ডিফল্ট চেকবাক্সটি প্রদর্শন করে তা আপনি কীভাবে স্টাইল করবেন তা না। সুতরাং সত্যিই একটি সহজ উপায় নেই।

কোনও কার্যকারিতা কল্পনা করা কঠিন নয় যেখানে আপনি চেকবক্সে একটি চিত্র ওভারলেলে জাভাস্ক্রিপ্ট ব্যবহার করবেন এবং সেই ছবিতে ক্লিকগুলি আসল চেকবাক্সটি চেক করার জন্য ব্যবহার করবে। জাভাস্ক্রিপ্ট ছাড়া ব্যবহারকারীদের ডিফল্ট চেকবক্স দেখতে হবে।

যোগ করার জন্য সম্পাদনা: এখানে একটি চমৎকার স্ক্রিপ্ট যা আপনার জন্য এটি করে ; এটি প্রকৃত চেকবাক্স উপাদানটি লুকিয়ে রাখে, এটি একটি স্টাইলযুক্ত সময়ের সাথে প্রতিস্থাপন করে এবং ক্লিক ইভেন্টগুলি পুনঃনির্দেশ করে।


আপনি অতিরিক্ত মার্কআপ যোগ এড়াতে পারেন। এটি ডেস্কটপের জন্য IE ব্যতীত সর্বত্র কাজ করে (তবে উইন্ডোজ ফোন এবং মাইক্রোসফ্ট এজের জন্য IE এ কাজ করে) CSS appearance সেট করে:

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}
<input type="checkbox" />


আমি SW4 এর উত্তরটির পরামর্শ অনুসরণ করব - চেকবাক্সটি লুকাতে এবং কাস্টম স্প্যান দিয়ে এটি আবরণ করতে, এই HTML টি সুপারিশ করে

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

লেবেলের মোড়কটি "for-id" বৈশিষ্ট্য লিঙ্কিংয়ের প্রয়োজন ছাড়াই পাঠ্যটিতে ক্লিক করার অনুমতি দেয়। যাহোক,

visibility: hidden ব্যবহার visibility: hidden এটি লুকান না visibility: hidden বা display: none

এটি ক্লিক বা ট্যাপ করে কাজ করে, তবে এটি চেকবক্সগুলি ব্যবহার করার জন্য একটি লিংক উপায়। কিছু লোক এখনও ফোকাস সরানোর জন্য আরো কার্যকর ট্যাব ব্যবহার করে, সক্রিয় করার স্থান , এবং সেই পদ্ধতিটি লুকিয়ে রেখে এটি অক্ষম করে। যদি ফর্মটি দীর্ঘ হয়, তবে tabindex বা tabindex বৈশিষ্ট্যগুলি ব্যবহার করতে কেউ tabindex সংরক্ষণ করবে। এবং যদি আপনি সিস্টেম চেকবাক্স আচরণ পালন করেন তবে হোভারে একটি উপযুক্ত ছায়া রয়েছে। ভাল স্টাইল চেকবক্স এই আচরণ অনুসরণ করা উচিত।

cobberboy এর উত্তর ফন্ট অসামান্য যা ফন্টগুলি মাপযোগ্য ভেক্টরগুলির থেকে সাধারণত বিটম্যাপের তুলনায় ভাল। উপরে এইচটিএমএল সঙ্গে কাজ, আমি এই সিএসএস নিয়ম সুপারিশ করবে:

  1. চেকবক্স লুকান

    input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }

    আমি কেবলমাত্র নেতিবাচক z-index ব্যবহার করি কারণ আমার উদাহরণটি পুরোপুরি এটির জন্য যথেষ্ট বড় চেকবক্স ত্বকের ব্যবহার করে। আমি left: -999px সুপারিশ করি না left: -999px যেহেতু এটি প্রতিটি বিন্যাসে পুনঃব্যবহারযোগ্য নয়। বুশান ওয়াঘের উত্তরটি গোপন করার জন্য একটি বুলেটপ্রুফ উপায় সরবরাহ করে এবং ট্যাবন্ডেক্স ব্যবহার করতে ব্রাউজারকে সন্তুষ্ট করে, তাই এটি একটি ভাল বিকল্প। যাইহোক, উভয় শুধু একটি হ্যাক। সঠিক উপায় আজ appearance: none , জোস্ট এর উত্তর দেখুন :

    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
  2. স্টাইল চেকবক্স লেবেল

    input[type="checkbox"] + span {
      font: 16pt sans-serif;
      color: #000;
    }
  3. চেকবক্স চামড়া যোগ করুন

    input[type="checkbox"] + span:before {
      font: 16pt FontAwesome;
      content: '\00f096';
      display: inline-block;
      width: 16pt;
      padding: 2px 0 0 3px;
      margin-right: 0.5em;
    }

    \00f096 হ'ল ফন্ট Awesome এর square-o , \00f096 ফোকাসে এমনকি ডটেড রূপরেখা সরবরাহ করতে সমন্বয় করা হয়েছে (নীচে দেখুন)।

  4. চেকবক্স চেক ত্বক যোগ করুন

    input[type="checkbox"]:checked + span:before {
      content: '\00f046';
    }

    \00f046 ফন্ট Awesome এর check-square-o , যা চওড়া square-o হিসাবে একই প্রস্থ নয়, যা উপরের প্রস্থ শৈলীটির কারণ।

  5. ফোকাস রূপরেখা যোগ করুন

    input[type="checkbox"]:focus + span:before {
      outline: 1px dotted #aaa;
    }

    সাফারি এই বৈশিষ্ট্যটি প্রদান করে না (@ জেসন সঙ্কির মন্তব্যটি দেখুন), ব্রাউজার সনাক্ত করতে এবং এটি Safari হলে এটি এড়িয়ে যান।

  6. নিষ্ক্রিয় চেকবক্স জন্য ধূসর রঙ সেট করুন

    input[type="checkbox"]:disabled + span {
      color: #999;
    }
  7. অ-নিষ্ক্রিয় চেকবক্সে হভার ছায়া সেট করুন

    input[type="checkbox"]:not(:disabled) + span:hover:before {
      text-shadow: 0 1px 2px #77F;
    }

ডেমো Fiddle

চেকবক্সগুলির উপর মাউসটি হভার করার চেষ্টা করুন এবং ট্যাব এবং স্থানান্তর করতে ট্যাব এবং টগল ব্যবহার করুন।


এখানে একটি সহজ CSS সমাধান কোন jQuery বা জাভাস্ক্রিপ্ট

আমি FontAwseome আইকন ব্যবহার করছি কিন্তু আপনি কোন ছবি ব্যবহার করতে পারেন

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

এটি বেশ পুরনো পোস্ট কিন্তু সম্প্রতি আমি সমস্যাটির বেশ আকর্ষণীয় সমাধান খুঁজে পেয়েছি।

আপনি appearance: none; ব্যবহার করতে পারে appearance: none; চেকবক্সটি তার ডিফল্ট স্টাইলটি বন্ধ করুন এবং তারপরে এখানে নিজের মতো লিখুন (উদাহরণ 4)

উদাহরণ খামখেয়াল

input[type=checkbox] {
  width: 23px;
  height: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  background-color: #878787;
  outline: 0;
  border: 0;
  display: inline-block;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}
<input type="checkbox">

দুর্ভাগ্যবশত ব্রাউজার সমর্থন আমার ব্যক্তিগত পরীক্ষা থেকে appearance বিকল্পের জন্য বেশ খারাপ, আমি শুধুমাত্র অপেরা এবং Chrome সঠিকভাবে কাজ করেছিলাম। তবে যখন ভালো সমর্থন আসে তখন আপনি এটি সহজ রাখতে বা আপনি কেবলমাত্র Chrome / Opera ব্যবহার করতে চান এটি করার উপায়।

"আমি ব্যবহার করতে পারেন?" লিংক


শুধু সিএসএস ব্যবহার করে এটি করার একটি উপায় আছে। আমরা (ab) তার পরিবর্তে label উপাদান এবং শৈলী ব্যবহার করতে পারি। ক্যাভিট এই যে IE8 এবং নিম্ন সংস্করণ জন্য কাজ করবে না।

সিএসএস:

.myCheckbox input {
    // display: none;
    // Better than display: none for accessibility reasons
    position: relative;
    z-index: -9999;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
}

.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

এইচটিএমএল:

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>

label উপাদানটি ব্যবহার করে আপনি একটি ছোট্ট কৌতুকের সাথে শৈলী চেকবক্সগুলি নীচের উদাহরণটি ব্যবহার করতে পারেন:

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}
<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

এবং উপরের কোডের জন্য একটি FIDDLE । মনে রাখবেন কিছু সিএসএস ব্রাউজারের পুরোনো সংস্করণে কাজ করে না, তবে আমি নিশ্চিত যে সেখানে কিছু অভিনব জাভাস্ক্রিপ্ট উদাহরণ আছে!


এখানে একটি সিএসএস / এইচটিএমএল একমাত্র সংস্করণ, কোনও জ্যাকারি বা জাভাস্ক্রিপ্ট প্রয়োজন নেই, সহজ এবং পরিচ্ছন্ন HTML এবং সত্যিই সহজ এবং ছোট CSS।

এখানে JSFiddle হয়

http://jsfiddle.net/v71kn3pr/

এখানে এইচটিএমএল

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>    
</div>

এখানে সিএসএস

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

এটি স্বতন্ত্র রেডিও বা চেকবক্স, চেকবক্সের গ্রোউপ এবং রেডিও বোতামগুলির গোষ্ঠীগুলির সাথেও সক্ষম হওয়ার জন্য অভিযোজিত করা যেতে পারে।

এই এইচটিএমএল / সিএসএস আপনাকে লেবেলের উপর ক্লিক করতেও অনুমতি দেবে, তাই আপনি লেবেলটিতে ক্লিক করলেও চেকবক্সটি চেক করা হবে এবং অচিহ্নিত করা হবে।

চেকবক্স / রেডিও বোতাম এই ধরনের পুরোপুরি কোন ফর্ম সঙ্গে কাজ করে, কোন সমস্যা নেই। Php, aspx, javafaces এবং coldfusion ব্যবহার করে পরীক্ষা করা হয়েছে।


এটি সহজ উপায় এবং আপনি এই শৈলী দিতে কোন চেকবক্সগুলি চয়ন করতে পারেন।

সিএসএস:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

এইচটিএমএল:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

পাশাপাশি একটি সহজ এবং লাইটওয়েট টেম্পলেট:

input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox]:checked:before {
  content: "\2713";
  background: #fffed5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

input[type=checkbox]:before {
  content: "\202A";
  background: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}
<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>

https://jsfiddle.net/rvgccn5b/


মনে হচ্ছে আপনি CSS ব্যবহার করে গ্রেস্কেলে চেকবক্সের রঙ পরিবর্তন করতে পারেন।

নিম্নলিখিতগুলি কালো থেকে ধূসর পর্যন্ত চেকবক্সগুলি রূপান্তরিত করে (যা আমি চেয়েছিলাম তা সম্পর্কে):

input[type="checkbox"] {
    opacity: .5;
}

আপনি iCheck ব্যবহার করতে পারেন এটি jQuery এবং Zepto এর জন্য চেকবক্সগুলি এবং রেডিও বোতামগুলি কাস্টমাইজ করা হয়েছে, সম্ভবত এটি আপনাকে সাহায্য করবে

নিশ্চিত করুন jQuery v1.7 + icheck.js এর আগে লোড করা হয়েছে

  1. একটি রঙ প্রকল্প চয়ন করুন, 10 বিভিন্ন শৈলী উপলব্ধ আছে:
    • কালো - minimal.css
    • লাল - red.css
    • সবুজ - green.css
    • নীল - blue.css
    • অ্যারো - aero.css
    • গ্রে - gray.css
    • কমলা - orange.css
    • হলুদ - yellow.css
    • গোলাপী - pink.css
    • বেগুনি - purple.css
  2. আপনার সাইটে কপি / skins / সংক্ষিপ্ত / ফোল্ডার এবং icheck.js ফাইল।
  3. আপনার এইচটিএমএল আগে লিখুন (আপনার পথ এবং রঙের প্রকল্প প্রতিস্থাপন):

একটি লাল রঙের স্কিমের জন্য উদাহরণ:

<link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>
  1. আপনার HTML এ কিছু চেকবক্স এবং রেডিও বোতাম যুক্ত করুন:

  2. ICheck প্লাগইনটি চালু করতে আপনার HTML এ জাভাস্ক্রিপ্ট যুক্ত করুন:

    <script>
        $(document).ready(function(){
          $('input').iCheck({
            checkboxClass: 'icheckbox_minimal',
            radioClass: 'iradio_minimal',
            increaseArea: '20%' // optional
          });
       });
    </script>
  3. কালো রঙের স্কিমগুলির থেকে ভিন্ন এই কোডটি ব্যবহার করুন (লালের জন্য উদাহরণ):

    <script>
        $(document).ready(function(){
          $('input').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass: 'iradio_minimal-red',
            increaseArea: '20%' // optional
          });
       });
    </script>
  4. সম্পন্ন


আমার গুগলিং থেকে, এটি চেকবক্স স্টাইলিংয়ের জন্য সবচেয়ে সহজ উপায়। শুধু যুক্ত করুন: পরে এবং: চেক করা: আপনার নকশা উপর ভিত্তি করে CSS পরে।

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}
<input type="checkbox"> <span>Select Text</span>


না, আপনি এখনও চেকবাক্সটি নিজেই স্টাইল করতে পারবেন না, তবে আমি (অবশেষে) একটি চেকবাক্সটি ক্লিক করার কার্যকারিতা রেখে একটি বিভ্রমকে কীভাবে স্টাইল করতে হবে তা বুঝিয়েছি। এর মানে হল যে আপনি যদি কার্সারটিকে টেক্সট নির্বাচন করার ঝুঁকি বা টেনে আনতে ড্র্যাগ-এবং-ড্রপ ছাড়াই সম্পূর্ণভাবে টগল করতে না পারেন!

এই সমাধান সম্ভবত রেডিও বাটন ফিট করে।

IE9, FF30.0 এবং Chrome 40.0.2214.91 এ নিম্নলিখিত কাজগুলি এবং এটি কেবল একটি মৌলিক উদাহরণ। আপনি এখনও এটি ব্যাকগ্রাউন্ড ইমেজ এবং ছদ্ম-উপাদানগুলির সাথে সংমিশ্রণে ব্যবহার করতে পারেন।

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>

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

এই মত চেকবক্সের জন্য এইচটিএমএল তৈরি করুন:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

রঙ লেবেল পরিবর্তন চেকবক্স জন্য এই শৈলী প্রয়োগ করুন

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>




checkbox