मैं दो रेडियो बटन बनाने की कोशिश कर रहा हूं जो उपयोगकर्ता द्वारा चुने जाने के बाद रंग बदलते हैं। हालांकि, एक बार जब मैं उनमें से एक का चयन करता हूं तो वे अनुमानित सीएसएस लागू नहीं करते हैं:

.poller-nature-radio input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

#id_poller_nature label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 4px;
}

#id_poller_nature {
    display: flex;
}

#id_poller_nature li {
    list-style-type: none;
}

#id_poller_nature input[type="radio"]:checked + label {
    background-color:#bfb;
    border-color: #4c4;
}
<div class="fieldWrapper poller-nature-radio">
  <label for="id_poller_nature_0">Nothing changes on select:</label>
  <ul id="id_poller_nature">
<li><label for="id_poller_nature_0"><input type="radio" name="poller_nature" value="Choice 1" required="" id="id_poller_nature_0">
    Question</label>

</li>
<li><label for="id_poller_nature_1"><input type="radio" name="poller_nature" value="Choice 2" required="" id="id_poller_nature_1">
    Information</label>

</li>
  </ul>
</div>
0
Jonas 5 सितंबर 2021, 10:32

3 जवाब

सबसे बढ़िया उत्तर

चूंकि आपने + css चयनकर्ता का उपयोग किया है, लेबल एक भाई के रूप में आना चाहिए और इनपुट के बाद आना चाहिए। नीचे दिए गए स्निपेट की जाँच करें।

.poller-nature-radio input {
    position: fixed;
    visibility: hidden;
}

#id_poller_nature label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 4px;
}

#id_poller_nature {
    display: flex;
}

#id_poller_nature li {
    list-style-type: none;
}

#id_poller_nature input[type="radio"]:checked + label {
    background-color:#bfb;
    border-color: #4c4;
}
<div class="fieldWrapper poller-nature-radio">
  <label for="id_poller_nature_0">Click the button to see the change:</label>
  <ul id="id_poller_nature">
    <li>
      <input
        type="radio"
        name="poller_nature"
        value="Choice 1"
        required=""
        id="id_poller_nature_0"
      />
      <label for="id_poller_nature_0"> Question</label>
    </li>
    <li>
      <input
        type="radio"
        name="poller_nature"
        value="Choice 2"
        required=""
        id="id_poller_nature_1"
      />
      <label for="id_poller_nature_1"> Information</label>
    </li>
  </ul>
</div>
2
Abin Thaha 5 सितंबर 2021, 07:40
    .poller-nature-radio input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

#id_poller_nature label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 4px;
}

#id_poller_nature {
    display: flex;
}

#id_poller_nature li {
    list-style-type: none;
}

#id_poller_nature_1:checked  {
    background-color:#bfb;
    border-color: #4c4;
}
<div class="fieldWrapper poller-nature-radio">
  <label for="id_poller_nature_0">Nothing changes on select:</label>
  <ul id="id_poller_nature">
  <li><label for="id_poller_nature_0"><input type="radio" name="poller_nature" 
 value="Choice 1" required="" id="id_poller_nature_0">
    Question</label>

</li>
<li><label for="id_poller_nature_1"><input type="radio" name="poller_nature" value="Choice 2" required="" id="id_poller_nature_1">
    Information</label>

</li>
  </ul>
</div>

Try to access the input element using the individual id then handle the :check state
0
nmurgor 5 सितंबर 2021, 07:45

इस तरह अपना एचटीएमएल बदलें।

         <ul id="id_poller_nature">
           <li>
              <input type="radio" name="poller_nature" value="Choice 1" required="" id="id_poller_nature_0">
              <label for="id_poller_nature_0">`enter code 
here`Question</label>
</li>
0
Lashika malith 5 सितंबर 2021, 07:56