html - সিএসএস-একটি নির্বাচিত রেডিও বাটন লেবেল কিভাবে?




css css3 (4)

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

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

এইচটিএমএল (JSX):

<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;  
}

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

এইচটিএমএল:

<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;
}

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


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

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

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

অন্যথায়, আপনার মার্কআপ পুনর্বিন্যাস করুন:

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

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

এইচটিএমএল

<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;
}

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


.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 গুণাবলীগুলি ব্যবহার করতে হয়েছিল।





css3