Target The Label Of A Checked Input April 01, 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 JugaBootstrap Navbar Is Displaying Vertically Instead Of HorizontallyBootstrap 3 Collapse On HoverDo Css Namespace Attribute Selectors Work With Xhtml/html Elements?input: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 postsSet Style For Not Not Hovered Elements OnlyHow Can I Create This Alternating Layout?Selecting One Of The Elements In A Pair By Pure Css P" & "div P" Same?" href="https://kissingsuzykolber.blogspot.com/2024/07/are-div-p-div-p-same.html"> P" & "div P" Same?" class="related-thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQ0zIfMD4cFksJDqha0sHzHAH5ft_fjzxqNVvOJn3G1MprajiN9NW1QALtVpR-YvLgm1PA8e2lp94Yg0Pc3IhNueAhI00nuGjED_Sco_wHrb6Eptz3TE_KPjI04mlU19JGW4FnZXm7xM/w192-h108-n-k-rw-no-nu/nomage+%25281%2529.png" width="192" height="108">Are "div > P" & "div P" Same? Post a Comment for "Target The Label Of A Checked Input"
Post a Comment for "Target The Label Of A Checked Input"