চেক করা রেডিও বোতামের লেবেলের জন্য সিএসএস নির্বাচনকারী

Question

চেক করা রেডিও বোতামের লেবেলে কি CSS (3) স্টাইল প্রয়োগ করা সম্ভব?

আমার নিম্নলিখিত মার্কআপ রয়েছে:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

আমি যা আশা করছিলাম তা হ'ল

label:checked { font-weight: bold; }

কিছু করতে হবে, কিন্তু হায় হায়া (যেমনটি আমি প্রত্যাশা করি)।

এমন কোনও নির্বাচক আছেন যা এই ধরণের কার্যকারিতা অর্জন করতে পারে? আপনি যদি ডিভস ইত্যাদির সাহায্যে আশেপাশে থাকতে পারেন তবে এটির সেরা সমাধানটি '' '' এর জন্য '' লেবেলটি ব্যবহার করে।

এটি লক্ষ করা উচিত যে আমি আমার অ্যাপ্লিকেশনটির জন্য ব্রাউজারগুলি নির্দিষ্ট করতে সক্ষম, তাই ক্লাস CSS3 ইত্যাদি সর্বোত্তম please

Answer 1

+প্রতীকটি চেষ্টা করে দেখুন : এটি সংলগ্ন ভাইবাল সংযোজক। এটি একই পিতা বা মাতা থাকা সাধারণ নির্বাচকদের দুটি ক্রম সংমিশ্রণ করে এবং দ্বিতীয়টি প্রথমটির পরে অবিলম্বে আসতে হবে ।

যেমন:

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked 

নিম্নলিখিত মার্কআপের জন্য খুব সুন্দরভাবে কাজ করে:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

... এবং যতক্ষণ না লেবেল রেডিও ইনপুট অনুসরণ করে ততক্ষণ ডিভিড ইত্যাদির সাথে বা ছাড়াই কোনও কাঠামোর জন্য এটি কাজ করবে।

উদাহরণ:

input[type="radio"]:checked+label { font-weight: bold; }

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

Comments

এটি করার মতো কোনও উপায় আছে কি না, তবে লেবেলটি পূর্ব উপাদান হিসাবে EG রয়েছে:<label for="rad1">Radio 1</label><input id="rad1" type="radio" name="rad">

— নাথান কোপ

~প্রয়োজনীয় সংলগ্ন নয় এমন ভাইবোনদের উপাদান নির্বাচন করতে আপনি একটি টিল্ডা ব্যবহার করতে পারেন । css-tricks.com/child-and-sibling-selectors

— মার্টিন

ধন্যবাদ, এটি আমাকে কোনও জেএস ছাড়াই "চিত্র রেডিও বোতাম" তৈরি করতে সহায়তা করেছে।

— কিলারএক্স

এটি লক্ষণীয় যে এটি IE 8 এ কাজ করবে না, যেহেতু :checkedনির্বাচক সমর্থিত নয় ।

— মার্ক আমেরিকা

@ মার্টিন আপনি যদি ভাবছেন তবে এটি আপনার ক্ষেত্রে আসলে কাজ করবে না, কারণ লেবেলটিকে এখনও ইনপুট অনুসরণ করতে হবে । '+' এবং '~' এর মধ্যে পার্থক্যটি হ'ল লেবেলটি সরাসরি সংলগ্ন হয়, বা সাধারণত অ্যাডজেন্ট হয়: লেবেলটি পরবর্তী উপাদান, বা পরের উপাদানগুলির মধ্যে কেবল একটি ।

— Njord

Answer 2

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আপনি যদি তাদের আলাদা না করে <input>সন্তানের সন্তান হতে চান তবে <label>এখানে সিএসএসের একটি খাঁটি উপায় রয়েছে যা আপনি এটি সম্পাদন করতে পারেন:

:checked + span { font-weight: bold; }

তারপরে একটি দিয়ে কেবল পাঠ্যটি মুড়িয়ে দিন <span>:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

এটি জেএসফিডেলে দেখুন ।

Comments

চমৎকার। এর ক্ষুরার পরিস্থিতি নিয়ে কাজ করার সময় এটি খুব দরকারী <label>@Html.RadioButtonFor(..) someText<label>, আমি <span>"সামারটেক্সট" এর আশেপাশে ছুঁড়েছিলাম এবং এটি একটি কবজির মতো কাজ করে। ধন্যবাদ!

— এস 1 আর-ল্যাঞ্জেলোট

নিস! এটা ভেবে দেখেনি।

— ম্যাথু ডিন

ঠিক যেটা আমার দরকার ছিল! ধন্যবাদ।

— রায়ান

আপনি যদি স্টাইল করতে চান: সক্রিয় লেবেল সহ: পরীক্ষিত? এটি আসলে কোনও সমাধান নয়।

— ম্যাকিয়েজ ক্রাওজিক

@MaciejKrawczyk এটা একটি সমাধান নয় তোমার জন্য কারণ আপনার ব্যবহার কেস সম্পূর্ণরূপে ভিন্ন। আপনি যদি স্টাইল করতে চান: সক্রিয় লেবেল আপনি কেবল এটি করতে পারেন label:active { font-weight: bold; }। দেখুন: jsfiddle.net/Gbq8Z/608 (বাহ আমি বিশ্বাস করতে পারি না যে ফিডল 608 বার কাটা হয়েছে)।

— মাইক

Answer 3

আমি এটি উল্লেখ করেছিলাম যেখানে আমি প্রথমে উল্লেখ করেছি কিন্তু আপনি for=বৈশিষ্ট্য সেট থাকা অবধি আপনি আপনার লেবেলগুলি অন্য কোনও ধারক স্থানে এম্বেড করতে পারেন । সুতরাং, আসুন এসও-তে একটি নমুনা পরীক্ষা করে দেখুন:

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}

<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>

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

যেহেতু labelউপাদানটি :checkedছদ্ম নির্বাচককে ব্যবহার করে না , তাই এটি লেবেলগুলিতে সঞ্চিত আছে তাতে কিছু আসে যায় না header। এটা তোলে যে যেহেতু যোগ বেনিফিট আছে headerএকটি সহোদর উপাদান আমরা ব্যবহার করতে পারি ~থেকে সরাতে জেনেরিক সহোদর নির্বাচক input[type=radio]:checkedDOM উপাদান থেকে headerধারক এবং তারপর অ্যাক্সেস করতে বংশধর / শিশু নির্বাচকরা ব্যবহার labelনিজেদের গুলি, তাদের যখন শৈলী করার ক্ষমতা যার ফলে তাদের সম্পর্কিত রেডিও বাক্স / চেকবক্স নির্বাচন করা হয় ।

আমরা কেবল লেবেলগুলিকেই স্টাইল করতে পারি না, তবে অন্যান্য সামগ্রীগুলিও স্টাইল করতে পারি যা সমস্ত ভাইয়ের সাথে সম্পর্কিত কোনও ভাইবোন ধারকের বংশধর হতে পারে input। এবং এখন আপনি যে মুহুর্তটির জন্য অপেক্ষা করছেন, সেই JSFIDDLE ! সেখানে যান, এটির সাথে খেলুন, এটি আপনার পক্ষে কাজ করুন, এটি কেন কাজ করে তা সন্ধান করুন, এটি ভাঙ্গুন, আপনি যা করেন তা করুন!

আশা করি যে সমস্ত কিছু বোধগম্য হয়েছে এবং পুরোপুরি প্রশ্নের উত্তর দিয়েছে এবং সম্ভবত যে কোনও ফলোআপ আপ ক্রপ হতে পারে।

Comments

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

— মরফেলস

এই প্রশ্নের গৃহীত উত্তরের>> 30x রয়েছে যতগুলি সীমাবদ্ধতা চাপিয়ে দেওয়া সত্ত্বেও এই উত্তরটি সম্পূর্ণভাবে মেনে চলা যায় 30 অনেকগুলি অনুরূপ হাইপিড পোস্টের বিপরীতে যা মাইন্ড-ব্লাইং তথ্যকে পূর্ণ করে তোলে, এটি আসলে দাবিটি সরবরাহ করে। আশ্চর্যজনক কাজ, অনেক অনেক ধন্যবাদ।

— দুষ্টু

@ নটটিলাস - এই উত্তরটি সরল উত্তরের সীমাবদ্ধতা পুরোপুরি মানিয়ে তোলে, কারণ এটি প্রতিটি বিকল্পের জন্য স্টাইলগুলি স্পষ্টভাবে সংজ্ঞায়িত করে। অর্থ্যাৎ খনি আপনাকে কাঠামোগত কনভেনশন করতে বাধ্য করে; এটি আপনাকে প্রতিটি রেডিও বোতাম এবং ফলাফলের জন্য সিএসএস লিখতে বাধ্য করে।

— স্টিফেন

@ এমরফ্লেস সরল! = "সুপার বেসিক": এই সমাধানটি আরও জটিল, আকর্ষণীয় এবং শক্তিশালী - এই সঠিক কোডের জন্য; আমার 1 অধিবেশন অনুসরণ করার পরে সমস্ত পৃষ্ঠায় কাজ করবে

— স্টিফেন

Answer 4

আপনার ইনপুটটি যদি শিশুটির একটি উপাদান labelএবং আপনার একাধিক লেবেল থাকে তবে আপনি @ মাইকের কৌশলটিFlexbox + এর সাথে সংযুক্ত করতে পারেন order।

এইচটিএমএল

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

CSS

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

এটি জেএসফিডেলে দেখুন ।

দ্রষ্টব্য: ভাইবোন নির্বাচক কেবল একই পিতামাতার মধ্যে কাজ করে। এটির কাজ করার জন্য, আপনি @ নাথান ব্লেয়ার হ্যাক ব্যবহার করে শীর্ষ-স্তরে লুকিয়ে থাকা ইনপুটটি তৈরি করতে পারেন ।

Answer 5

আপনি কিছুটা jQuery ব্যবহার করতে পারেন:

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

আপনার চেক করা রেডিও বোতামগুলিরও পৃষ্ঠা লোডে সঠিক বর্গ রয়েছে তা নিশ্চিত করা দরকার।

Comments

হ্যাঁ ... জাভাস্ক্রিপ্ট (ফ্রেমওয়ার্ক) এর মাধ্যমে এটি করা অবশ্যই সম্ভব তবে এটি যতটা সহজ মনে হয় তেমন সহজ নয়। ইতিমধ্যে অন্য কিছু যদি বাক্সটি চেক করে থাকে তবে কি হবে? একই গ্রুপের অন্য একটি রেডিও নির্বাচন করা হলে কোন স্ক্রিপ্ট এই শ্রেণিটি সরিয়ে ফেলবে? এটি সত্যিই দ্রুত জটিল হয়ে ওঠে। আমি ব্রাউজারটির বিল্ট ফর্ম + সিএসএস কার্যকারিতাটি ব্যবহার করতে চাই কারণ এটি প্রতিবার কাজ করবে।

— স্টিফেন

আপনার নির্বাচকটি হওয়া উচিত$('label[for="' + $(this).attr('id') + '"]').toggleClass();

— ওয়েসলি মার্চ

Answer 6

হালনাগাদ:

এটি কেবলমাত্র আমার পক্ষে কাজ করেছিল কারণ আমাদের বিদ্যমান উত্পন্ন উত্সাহিত এইচটিএমএলটি উদ্বেগজনক ছিল, এসগুলির labelসাথে radioগুলি তৈরি করে উভয়কেই checkedবৈশিষ্ট্য দেয়।

কিছু মনে করবেন না, এবং এটি আনার জন্য ব্রিল্যান্ডের জন্য বড় উত্সাহ!

যদি আপনার লেবেলটি একটি চেকবক্সের ভাইবোন হয় (যা সাধারণত এটি হয়) তবে আপনি ~সহোদর নির্বাচক এবং label[for=your_checkbox_id]এটির সমাধানের জন্য একটি ব্যবহার করতে পারেন ... বা যদি আপনার একাধিক লেবেল থাকে তবে লেবেলটিকে একটি আইডি দিতে পারেন (যেমন এই উদাহরণে যেখানে আমি বোতামগুলির জন্য লেবেল ব্যবহার করুন)

---

এখানে এসে একই খুঁজছেন - কিন্তু আমার উত্তর খোঁজার শেষ পর্যন্ত ডক্স ।

অ্যাট্রিবিউটযুক্ত একটি labelউপাদানটি এ checkedজাতীয়ভাবে নির্বাচন করা যেতে পারে:

label[checked] {
  ...
}

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে সম্ভবত এটি কাউকে সাহায্য করবে :)

Comments

এবং লেবেলটি কীভাবে চেক হওয়ার কথা?

— ব্রিলিয়ানড

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

— শিক্ষানবিসদেব