CSS3: চেক করা সিউডো-ক্লাস

Question

আমি জানি যে অফিসিয়াল সিএসএস 3 :checkedসিউডো-ক্লাস রয়েছে, তবে কি :uncheckedছদ্ম-শ্রেণি রয়েছে এবং তাদের কি একই ব্রাউজার সমর্থন রয়েছে?

সিটপয়েন্টের রেফারেন্সটিতে কোনওটি উল্লেখ করা হয়নি, তবে এটি হোয়াটপ স্পেক্ট (যা কিছু হোক) তা করে।

আমি জানি যখন একই ফলাফল অর্জন করা যেতে পারে :checkedএবং :not()সিউডো-শ্রেণীর একত্রিত করা হয়, কিন্তু আমি এখনও কৌতুহলী:

input[type="checkbox"]:not(:checked) {
    /* styles */
}

সম্পাদনা:

ডাব্লু 3 সি একই কৌশলটির প্রস্তাব দেয়

অবনতি ছদ্ম-শ্রেণীর ব্যবহার করে একটি চেক না করা চেকবক্স নির্বাচন করা যেতে পারে:

:not(:checked)

Answer 1

:unchecked নির্বাচক বা সিএসএস ইউআই লেভেল 3 স্পাকে সংজ্ঞায়িত করা হয়নি, বা এটি নির্বাচকদের 4 স্তরে উপস্থিত হয়নি।

বস্তুত, W3C থেকে উদ্ধৃতি হয় নির্বাচক 4 বৈশিষ্ট থেকে নেওয়া । যেহেতু সিলেক্টর ৪ টি ব্যবহার করার পরামর্শ দেয় তাই :not(:checked)এটি অনুমান করা নিরাপদ যে কোনও :uncheckedসিউডো নেই। এর জন্য ব্রাউজার সমর্থন :not()এবং :checkedঅভিন্ন, যাতে কোনও সমস্যা হওয়া উচিত নয়।

এটি :enabledএবং :disabledরাষ্ট্রগুলির সাথে অসঙ্গত বলে মনে হতে পারে , বিশেষত যেহেতু কোনও উপাদান সক্ষম বা অক্ষম করা যায় না (অর্থাত শব্দার্থকগুলি সম্পূর্ণরূপে প্রয়োগ হয় না) তবে এই অসঙ্গতির কোনও ব্যাখ্যা বলে মনে হয় না।

( :indeterminateগণনা করা হয় না, কারণ একটি উপাদান একইভাবে চেক করা, চেক বা অনির্দিষ্ট হতে পারে কারণ শব্দার্থবিদ্যা প্রয়োগ হয় না))

Comments

কেবলমাত্র এই উত্তরে যুক্ত করার জন্য যে নির্বাচন করা: নয় (: যাচাই করা) Chrome এ পুরোপুরি কাজ করে না, তবে এটি IE এ নয় (9 এবং 11 তে পরীক্ষা করা হয়েছে)।

— ব্রুনো ফিঙ্গার

@ ব্রুনো ফিঙ্গার:: চেক করা এবং: (নয়: (চেক করা)) উভয়ই আইই-তে কাজ করা উচিত, উভয়ই ত্রুটি দ্বারা সমানভাবে প্রভাবিত হয় যেখানে চেক করা স্থিতি পরিবর্তন করলে চেক / চেক না করা সম্পর্কিত উপাদানগুলির শৈলীর লক্ষ্যবস্তু আপডেট হয় না does উপাদান।

— BoltClock

Answer 2

আমি মনে করি আপনি জটিল বিষয়গুলিকে আরও জটিল করার চেষ্টা করছেন। একটি সহজ সমাধান হ'ল চেক করা শৈলীর সাহায্যে ডিফল্টরূপে আপনার চেকবক্সটিকে স্টাইল করা এবং তারপরে চেক করা স্টাইল শৈলী যুক্ত করা।

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

আমি একটি পুরানো থ্রেড আনার জন্য ক্ষমা চাইছি তবে মনে হয়েছিল এটি আরও ভাল উত্তর ব্যবহার করতে পারত।

সম্পাদনা (3/3/2016):

ডাব্লু 3 সি স্পেকস জানিয়েছে যে চেক :not(:checked)না করা অবস্থা নির্বাচন করার জন্য তাদের উদাহরণ হিসাবে। তবে এটি সুস্পষ্টভাবে চেক না করা অবস্থা এবং কেবল এই শৈলীগুলি চেক না করা অবস্থায় প্রয়োগ করবে। স্টাইল যুক্ত করার জন্য এটি দরকারী যা কেবল চেক করা অবস্থায় থাকা অবস্থায় প্রয়োজন এবং input[type="checkbox"]নির্বাচকটিতে যদি ব্যবহার করা হয় তবে এটি চেক করা রাষ্ট্র থেকে অপসারণ করা দরকার । স্পষ্টতার জন্য নীচে উদাহরণ দেখুন।

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

:not(:checked)উপরের উদাহরণে ব্যবহার না করে :checkedবাছাইকারীকে border: none;একই প্রভাব অর্জনের জন্য একটি ব্যবহারের প্রয়োজন হবে ।

input[type="checkbox"]সদৃশ হ্রাস করতে বেস স্টাইলিংয়ের জন্য ব্যবহার করুন ।

input[type="checkbox"]:not(:checked)আপনি চেক করা অবস্থায় প্রয়োগ করতে চান না এমন স্পষ্টত চেক করা স্টাইলগুলির জন্য ব্যবহার করুন ।

Comments

সিএসএস নির্বাচকদের অন্যান্য ব্যবহার রয়েছে যেখানে এটি দরকারী / অভিব্যক্তিপূর্ণ যদিও: জাভাস্ক্রিপ্ট, স্বয়ংক্রিয় ব্রাউজারের পরীক্ষা

— নভেম্বর

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

— বোলটক্লক

আর সম্ভব নয় যেখানে এটি সম্ভব নয়: 2 টিরও বেশি রেডিও বোতাম। উদাহরণস্বরূপ, আপনি যখন বিকল্প # 1 বিকল্পটি দেখছেন তখন একটি স্টাইল চান: চেক করা এবং অন্য কিছু যখন চেক করা থাকে তখন। সমাধানটি হল:not(:checked)

— নবীন

আপনি স্টাইল শুধুমাত্র অনুপস্থিত নির্দিষ্ট বেশী অনুপস্থিত ছিল, কেন একটি ব্যবহার করবেন :first-child, :last-childঅথবা :nth-childসঙ্গে একযোগে নির্বাচক :checked। :not(:checked)আমি আপনার মন্তব্যে ভুল বোঝাবুঝি না করে আপনি নির্দিষ্ট করা পরিস্থিতিটি আবরণ করবেন না।

— মাইকেল স্ট্র্যামেল

@ মিশেল স্ট্রেমেল এইচটিএমএলসের ক্রম সিএসএসে রাখছেন?

— নাহ

Answer 3

এখানে নেই: চেক করা সিউডো ক্লাসটি তবে আপনি যদি চেকড সিউডো ক্লাস এবং ভাইবোন নির্বাচক ব্যবহার করেন তবে আপনি উভয় রাজ্যের মধ্যে পার্থক্য করতে পারেন। আমি সর্বশেষ ব্রাউজার সব সমর্থন বিশ্বাস: চেক করা ছদ্ম বর্গ, আপনি এই সম্পদ থেকে আরও তথ্য পেতে পারেন: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

আপনি jquery এর সাথে আরও ভাল ব্রাউজার সমর্থন পেতে চলেছেন ... ক্লিকটি কখন ঘটে তা সনাক্ত করতে আপনি একটি ক্লিক ফাংশন ব্যবহার করতে পারেন এবং যদি এটি চেক করা হয় বা না হয় তবে আপনি ক্লাস যুক্ত করতে পারেন বা প্রয়োজনীয় হিসাবে কোনও শ্রেণি অপসারণ করতে পারেন ...

Answer 4

আমি যেভাবে এটি পরিচালনা করেছি তা শর্তের ভিত্তিতে একটি লেবেলের ক্লাসের নামটি স্যুইচ করছে। এইভাবে আপনার কেবল একটি লেবেল প্রয়োজন এবং বিভিন্ন রাজ্যের জন্য আপনার বিভিন্ন ক্লাস থাকতে পারে ... আশা করি এটি সাহায্য করে!