css - tutorial - w3schools sql




সিএসএস চেকবক্স ইনপুট স্টাইলিং (6)

input জন্য কোন শৈলী প্রতি ইনপুট উপাদান প্রভাবিত করে। প্রতিটি চেক বক্স উপাদানতে ক্লাস প্রয়োগ না করে কেবল চেকবক্সগুলির জন্য আবেদন করার জন্য স্টাইল নির্দিষ্ট করার উপায় আছে?


আপনি শুধুমাত্র কিছু নির্দিষ্ট বৈশিষ্ট্য প্রয়োগ করতে পারেন:

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

এটা here ব্যাখ্যা করে।


আমি লেবেল ছাড়া আমার নিজের সমাধান তৈরি করুন

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">


ক্লাস ভাল কাজ করে, যেমন:

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

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

যদিও সিএসএস আপনাকে চেকবক্সের ধরন বা অন্য কোন ধরনের নির্দিষ্ট স্টাইলটি করার জন্য একটি উপায় সরবরাহ করে তবে ব্রাউজারগুলির সমস্যাগুলি হ'ল এটি সমর্থন করে না।

আমি এই ক্ষেত্রে আপনার একমাত্র অপশন আপনার চেকবক্সে ক্লাস প্রয়োগ করা যাচ্ছে মনে হয়।

শুধু আপনার চেকবক্সে ক্লাস = "চেকবক্স" যোগ করুন।

তারপর আপনার CSS কোড যে শৈলী তৈরি করুন।

আপনি করতে পারেন এক জিনিস এই হল:

main.css

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

ie.css

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

তারপর IE নির্দিষ্ট CSS ব্যবহার করুন:

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

IE এ কাজ করার জন্য আপনাকে অবশ্যই ক্লাসটি যুক্ত করতে হবে এবং এটি IE- কে সমর্থন করে না এমন অন্যান্য অ-ব্রাউজারগুলিতে কাজ করবে না। তবে এটি CSS ওয়েবসাইটের সাথে আপনার ওয়েবসাইটকে এগিয়ে নিয়ে যাওয়ার এবং IE সমর্থন পাওয়ার ক্ষেত্রে, আপনি নির্দিষ্ট বিএসএস কোড এবং চেকবক্সগুলি থেকে CSS ক্লাসগুলিকে সরাতে সক্ষম হবেন।



ট্রাইডেন্ট ::-ms-check চেকবক্স এবং রেডিও বাটন কন্ট্রোলের জন্য ::-ms-check ছদ্ম-উপাদান সরবরাহ করে। উদাহরণ স্বরূপ:

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

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

উইন্ডোজ 8 এ IE10 এ নিম্নরূপ এই প্রদর্শন করে:





css