সিএসএস - একটি নির্বাচিত রেডিও বোতামগুলির লেবেল কীভাবে স্টাইল করবেন?

Question

আমি রেডিও বোতামের নির্বাচিত লেবেলে একটি স্টাইল যুক্ত করতে চাই:

এইচটিএমএল:

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked>All</label>
 <label><input type="radio" value="false">Open</label>
 <label><input type="radio" value="true">Archived</label>
</div>

সিএসএস

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

কোন ধারণা আমি কি ভুল করছি?

Answer 1

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

<div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all" checked>
  <label for="radio1">All</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">Open</label>

  <input type="radio" id="radio3" name="radios" value="true">
  <label for="radio3">Archived</label>
</div>

প্রথমত, আপনি সম্ভবত nameরেডিও বোতামগুলিতে বৈশিষ্ট্যটি যুক্ত করতে চান । অন্যথায়, তারা একই গোষ্ঠীর অংশ নয় এবং একাধিক রেডিও বোতাম চেক করা যেতে পারে।

এছাড়াও, যেহেতু আমি লেবেলগুলিকে ভাইবোনের (রেডিও বোতামগুলির) হিসাবে স্থাপন করেছি, সেগুলি সংযুক্ত করার জন্য আমাকে idএবং forবৈশিষ্ট্যগুলি ব্যবহার করতে হয়েছিল ।

Comments

@ জনসিএল এটি সত্য। আইই 8 :checkedনির্বাচককে কার্যকর করে না ।

— Vidime বিদাস

যদি আমি ইনপুট [টাইপ = "রেডিও"] বা ইনপুট [টাইপ = "চেকবক্স"] নির্বাচন করতে না চাই তবে। এটি কেবল একটি নিয়মে করা এবং করা এড়াতে সঠিক বাক্য গঠন: ইনপুট [টাইপ = "রেডিও"], ইনপুট [টাইপ = "চেকবক্স"]

— ফেব্রিগ্যাস ৮৮ ই

@ ফেব্রিগাস ৮৮ আপনি এই উপাদানগুলিতে একটি সিএসএস ক্লাস যুক্ত করতে পারেন এবং তারপরে.foo { ... }

— Šime Vidas

আপনি সবেমাত্র কীবোর্ড অ্যাক্সেসকে হত্যা করেছেন! আশা করি আপনার সমস্ত ব্যবহারকারীরা দেহযুক্ত করতে পারবেন। ... এখন, আপনি যদি কেবলমাত্র রেডিও বোতামটি ব্যবহার না করেই রাখেন display:none;তবে ব্রাউজারগুলি এটিকে ঠিক কি-বোর্ড দিয়ে কাজ করবে।

— gcb

@gcb প্রশ্ন ছিল কীভাবে স্ট্যান্ডার্ড রেডিও বোতামগুলি গোপন করা যায়। আমি এই প্রোটোটাইপটি jsbin.com/miwati/edit?html,css,output তৈরি করেছি । রেডিও বোতামগুলি পুরোপুরি লেবেলের পিছনে অবস্থিত। সম্ভবত সেরা পন্থা যদিও না।

— Vidime বিদাস

Answer 2

আপনি যদি সত্যই চেকবক্সগুলি লেবেলের ভিতরে রাখতে চান তবে একটি অতিরিক্ত স্প্যান ট্যাগ যুক্ত করার চেষ্টা করুন, যেমন।

এইচটিএমএল

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked><span>All</span></label>
 <label><input type="radio" value="false"><span>Open</span></label>
 <label><input type="radio" value="true"><span>Archived</span></label>
</div>

সিএসএস

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:pink !important;
}

এটি নির্বাচিত রেডিও বোতামের সমস্ত ভাইবোনদের জন্য ব্যাকগ্রাউন্ড সেট করবে।

Comments

আমি এই পদ্ধতির পছন্দ, যদিও আমি একটি ভিন্ন নির্বাচক ব্যবহৃত (+ নীচে এবং উল্লিখিত এই প্রশ্নে । আমি শৈলী মাত্র নির্বাচিত আইটেমের চেয়েছিলেন এই অনুমতি দেওয়া আমার জন্য চিন্তা না forবৈশিষ্ট্যাবলী।

— brichins

Answer 3

+উপাদানগুলি ভাইবোন না থাকলে আপনি সংলগ্ন ভাইবোন নির্বাচনকারী ( ) ব্যবহার করছেন । লেবেল ইনপুটটির পিতামাতা , এটি ভাইবাল নয়।

সিএসএসের বংশধরদের উপর ভিত্তি করে কোনও উপাদান নির্বাচন করার কোনও উপায় নেই (বা এর অনুসরণকারী কিছু নেই)।

এটি সমাধান করার জন্য আপনাকে জাভাস্ক্রিপ্টের দিকে তাকাতে হবে।

বিকল্পভাবে, আপনার মার্কআপ পুনর্বিন্যাস:

<input id="foo"><label for="foo">…</label>

Answer 4

আপনি আপনার এইচটিএমএল এবং সিএসএসে স্প্যান যুক্ত করতে পারেন।

আমার কোড থেকে একটি উদাহরণ এখানে ...

এইচটিএমএল (জেএসএক্স):

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>  
<label for="radiostyle1"><span></span> am  </label>

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm  </label>

সিএসএস স্ট্যান্ডার্ড রেডিও বোতামটি স্ক্রিনে অদৃশ্য হয়ে যাবে এবং কাস্টম বোতামের চিত্রটি সুপারমোজ করুন:

input[type="radio"] {  
    opacity:0;                                      
}

input[type="radio"] + label {
    font-size:1em;
    text-transform: uppercase;
    color: white ;  
    cursor: pointer;
    margin:auto 15px auto auto;                    
}

input[type="radio"] + label span {
    display:inline-block;
    width:30px;
    height:10px;
    margin:1px 0px 0 -30px;                       
    cursor:pointer;
    border-radius: 20%;
}


input[type="radio"] + label span {
    background-color: #FFFFFF 
}


input[type="radio"]:checked + label span{
     background-color: #660006;  
}

Answer 5

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

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

ক্লাসটিও পূর্ব-পরীক্ষিত ইনপুটগুলির লেবেল দিতে ভুলবেন checkedlabelনা

Answer 6

এখানে একটি অ্যাক্সেসযোগ্য সমাধান

label {
  position: relative;
}

label input {
  position: absolute;
  opacity: 0;
}

label:focus-within {
  outline: 1px solid orange;
}

<div class="radio-toolbar">
  <label><input type="radio" value="all" checked>All</label>
  <label><input type="radio" value="false">Open</label>
  <label><input type="radio" value="true">Archived</label>
</div>