css w3schools সিএসএস চেকবক্স ইনপুট স্টাইলিং




w3schools sql (8)

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


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

কিন্তু এটি শুধুমাত্র IE7 এবং তারপরে ব্রাউজারগুলির জন্য কাজ করবে, যাদের জন্য আপনাকে একটি ক্লাস ব্যবহার করতে হবে।


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

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

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

তারপর আপনার 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 এ নিম্নরূপ এই প্রদর্শন করে:


আমি সম্প্রতি রেডিও বাটন এবং চেকবক্স স্টাইলিং জন্য আবিষ্কৃত কিছু। আগে, আমি 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] পরিবর্তন input[type=checkbox] এবং border-radius:15px; পরিবর্তন input[type=checkbox] border-radius:15px; border-radius:4px;

এই আপনি কিছুটা উপকারী আশা করি।


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

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

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

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

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"] {...}

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







css