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

Question

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

Answer 1

সিএসএস 2 এর মাধ্যমে আপনি এটি করতে পারেন:

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

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

Comments

আমি বিশ্বাস করি IE 7 এবং এর চেয়ে বড় সমর্থন বৈশিষ্ট্য নির্বাচনকারী, যা আসলে সিএসএস 2.1। quirksmode.org/css/contents.html

— টিজে এল

@ রিলতেবো: নোট করুন অনেক স্টাইল (সীমানা, পটভূমি, ইত্যাদি) সরাসরি এইচটিএমএল চেকবক্সগুলিতে প্রয়োগ করা যায় না।

— রায় টিঙ্কার

@ রয়টাইঙ্কার আপনি চেকবক্সগুলির জন্য ব্যবহার করবেন outlineনা border।

— টাইলারহ

Answer 2

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

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] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         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">

Comments

এই চিত্রের মতো ধূসর পটভূমির সাথে কীভাবে করবেন ( i.stack.imgur.com/Q23fy.png ), আপনি যদি আমার পোস্টটি দেখতে পারেন ( pt.stackoverflow.com/questions/436890/estilizar-checkbox )। ধন্যবাদ।

— টিয়াগো

ফ্যান্টাস্টিক! আপনি কি আমার পোস্ট হিসাবে উত্তরটি আমার মতো করে চিহ্নিত করতে পারেন?

— টিয়াগো

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

— চিহ্নিত করুন

— দারুণ

Answer 3

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

আশা করি এটি আপনার কিছুটা উপকারী হবে।

Comments

সত্যিই খুব ভাল, খুব খারাপ যে অপেরা বা আইই = তে এত বেশি কাজ করে না (

— মিশেল আইরেস

আপনি যদি নিজের স্টাইলিংটি চেকবক্স / ইনপুটটিতে প্রয়োগ করতে চান তবে সিএসএসের মাধ্যমে কাস্টম ইনপুট উপাদানগুলি সম্পর্কে আমার ব্লগপোস্টটি চেকআউট করুন । তারপরে আপনি এটি স্টাইল করতে পারেন তবে আপনি কেবল আই এস 8 ফ্যালব্যাক সহ সিএসএসের সাথে চান।

— ফেলিক্স হ্যাগস্পিল

Answer 4

ক্লাসগুলিও ভাল কাজ করে যেমন:

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

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

Comments

ফর্মের ভিতরে চেকবাক্সের বাসা বাঁধার সম্ভবত এটি প্রয়োজন নেই কারণ আপনি কোনও ফর্মের বাইরে একটি চেকবক্স খুঁজে পাওয়ার সম্ভাবনা নেই। ইনপুট .চেকবক্সটি ইনপুট.কেকবাক্স হওয়া উচিত

— ডানকান ওয়াকার

@ ডানকানওয়ালার আমি এটি পরীক্ষা করে দেখিনি, তবে formট্যাগগুলি কি ডিফল্ট জমা দেওয়ার নিয়ন্ত্রণের সাথে ইনপুট নিয়ন্ত্রণটি বেঁধে রাখার প্রয়োজন হবে না ?

— জিম ফেল

@ জিম ফেল এটি কাজ করে না। আমি যদি দুটি ভিন্ন স্টাইলযুক্ত চেকবক্সের জন্য দুটি পৃথক ক্লাস তৈরি করি যেমন। চেকবক্স 1 [ইনপুট = 'চেকবক্স'] এবং .চেকবক্স 2 [ইনপুট = 'চেকবক্স'], শৈলীগুলি সর্বদা উভয় ক্ষেত্রেই প্রভাব ফেলবে .. আপনি কীভাবে স্টাইলিং পৃথক নিশ্চিত করবেন?

— ক্রিস

@ ক্রাইস আপনার চেকবক্স উপাদানগুলিকে বিভিন্ন শ্রেণীর নাম দেওয়া দরকার।

— জিম ফেলে

Answer 5

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

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

এটি এখানে ব্যাখ্যা করে ।

Answer 6

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

তবে এটি কেবল আই 7 এবং এর বাইরে ব্রাউজারগুলির জন্যই কাজ করবে, তাদের জন্য আপনাকে কোনও শ্রেণি ব্যবহার করতে হবে।

Comments

আই 7 এর নীচে এটি আই ই 7 নিজেই নির্বাচকদের সাথে ভাল। পরীক্ষিত এবং এখানে দেখুন: kimblim.dk/css-tests/selectors

— ফ্রাঙ্ক Nocke

Answer 7

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

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

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

উইন্ডোজ 8-এ আই 10 তে নিম্নলিখিত হিসাবে প্রদর্শিত হয়:

Answer 8

যেহেতু আই 6 6টি অ্যাট্রিবিউট সিলেক্টরদের বুঝতে পারে না, আপনি ডিন এডওয়ার্ডস দ্বারা আইই 6 (শর্তাধীন মন্তব্য সহ) এবং jQuery বা আই 7.js দ্বারা দেখা একটি স্ক্রিপ্ট একত্রিত করতে পারেন ।

মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরারকে মানদণ্ড অনুসারে ব্রাউজারের মতো আচরণ করতে আইআই 7 (.js) একটি জাভাস্ক্রিপ্ট লাইব্রেরি। এটি অনেকগুলি এইচটিএমএল এবং সিএসএস সমস্যা সমাধান করে এবং স্বচ্ছ পিএনজি আইই 5 এবং আই 6 এর অধীনে সঠিকভাবে কাজ করে।

ক্লাস বা jQuery বা IE7.js ব্যবহারের পছন্দটি আপনার পছন্দ এবং অপছন্দ এবং আপনার অন্যান্য প্রয়োজনীয়তার উপর নির্ভর করে (আপনার সাইটের পুরো পিএনজি -২৪ স্বচ্ছতার সাথে সম্পূর্ণ স্বচ্ছতার সাথে পিএনজি -8 এর উপর নির্ভর না করে যা আই 6-তে 1-বিট স্বচ্ছতার পিছনে পড়ে) - কেবল আতশবাজি এবং pngnq ইত্যাদি দ্বারা তৈরি)

Answer 9

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

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

আপনার চেকবক্সগুলিতে কেবল শ্রেণি = "চেকবক্স" যুক্ত করুন।

তারপরে আপনার CSS কোডে সেই স্টাইলটি তৈরি করুন।

আপনি যা করতে পারেন তা হ'ল:

main.css

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

ie.css

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

তারপরে আইই নির্দিষ্ট সিএসএস অন্তর্ভুক্ত ব্যবহার করুন:

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

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

Comments

2 স্টাইল শীট সম্পর্কে টিপ জন্য ধন্যবাদ। যদিও আমি এই ধরণের জিনিস এড়াতে চাইছি আমি মনে করি আমি কেবল চেক বাক্সের জন্য একটি স্টাইল তৈরি করব এবং এটি চালিয়ে যাব ...