Target The Label Of A Checked Input June 06, 2024 Post a Comment If I have a radio input that is wrapped within a label, how can I target the label when the input is checked? Payment Plan:Solution 1: There's no parent or backward selector in CSS (yet?). Thus, we can't select the wrapper label by the wrapped input.There are two options:1) Wrapping the content by an inline wrapper like <span> element, as follows:<label><inputname="os0"type="radio"value="monthly"><span>TEST</span></label>CopyThen select the <span> by using adjacent sibling selector +: input:checked + span { color: red } CopyWORKING DEMO2) Using for attribute for the label to target the input by its id attribute as follows:<input name="os0"type="radio"id="myinput" value="monthly"> <label for="myinput">TEST</label> CopyAnd Then select the label by:Baca JugaCss To Untarget Certain Element?How To Capitalize Only The First Letter Of An Html Option Element Using Css?Faking The :has() "parent Selector" Using Only Cssinput:checked + label { color: red } CopyWORKING DEMO.Solution 2: Your css will work if you modify your html to this:<div><p>Payment Plan:</p><inputid="os0"name="os0"type="radio"value="monthly"><labelfor="os0">TEST</label></div>CopyUsing the for attribute with an id on the input will let you click on the label to affect the button, as it does when wrapped in the element. http://jsfiddle.net/PMmrk/ Share You may like these postsHtml Id With Numerical Value Not Recognized By CssSelect Only The First Row In A Table With CssThe :focus Pseudo-class And When It Is AppliedHow Can I Combine Multiple Css Rules? Post a Comment for "Target The Label Of A Checked Input"
Post a Comment for "Target The Label Of A Checked Input"