{"id":7873,"date":"2010-11-18T11:15:35","date_gmt":"2010-11-18T18:15:35","guid":{"rendered":"http:\/\/css-tricks.com\/"},"modified":"2010-11-18T11:15:35","modified_gmt":"2010-11-18T18:15:35","slug":"highlight-related-label-when-input-in-focus","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/jquery\/highlight-related-label-when-input-in-focus\/","title":{"rendered":"Highlight Related Label when Input in Focus"},"content":{"rendered":"<pre><code class=\"lang-js prettyprint\">$(\"form :input\").focus(function() {\r\n  $(\"label[for='\" + this.id + \"']\").addClass(\"labelfocus\");\r\n}).blur(function() {\r\n  $(\"label\").removeClass(\"labelfocus\");\r\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>$(&#8220;form :input&#8221;).focus(function() { $(&#8220;label[for='&#8221; + this.id + &#8220;&#8216;]&#8221;).addClass(&#8220;labelfocus&#8221;); }).blur(function() { $(&#8220;label&#8221;).removeClass(&#8220;labelfocus&#8221;); });<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":6241,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/click-input-when-label-clicked\/","url_meta":{"origin":7873,"position":0},"title":"Trigger Click on Input when Label is Clicked","date":"April 22, 2010","format":false,"excerpt":"Labels should have \"for\" attributes that match the ID of the input they are labeling. This means we can snag that attribute and use it in a selector to trigger a click on the input itself. Assuming of course you have some reason to watch for clicks on inputs. var\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14180,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/enabled\/","url_meta":{"origin":7873,"position":1},"title":":enabled","date":"April 18, 2013","format":false,"excerpt":"The :enabled pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with form elements (<input>, <select>, <textarea>). Enabled elements include ones in that you can select, that you can enter data into, or that you can focus on or click. So when\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15146,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-checkboxes-and-radio-buttons\/","url_meta":{"origin":7873,"position":2},"title":"Custom Checkboxes and Radio Buttons","date":"November 23, 2011","format":false,"excerpt":"The selectors here are specific to Wufoo markup, but the concepts at work can work for any form. The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with graphics. Then use the :checked selector to alternate\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14166,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/checked\/","url_meta":{"origin":7873,"position":3},"title":":checked","date":"February 17, 2013","format":false,"excerpt":"The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not\u2026","rel":"","context":"With 45 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14188,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","url_meta":{"origin":7873,"position":4},"title":":focus","date":"September 6, 2011","format":false,"excerpt":"The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } CodePen Embed Fallback Any element (most commonly\u00a0<input>s and\u00a0<textarea>s) are in \"focus\" when they are selected and ready\u2026","rel":"","context":"With 33 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9232,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-radio-buttons\/","url_meta":{"origin":7873,"position":5},"title":"Custom Radio Buttons","date":"May 2, 2011","format":false,"excerpt":"#foo:checked::before, input[type=\"checkbox\"] { position:absolute; clip: rect(0,0,0,0); clip: rect(0 0 0 0); } #foo:checked, input[type=\"checkbox\"] + label::before { content: url('checkbox.png'); } input[type=\"checkbox\"]:checked + label::before { content: url('checkbox-checked.png'); } #foo doesn't reference any particular element, it's there purely to prevent browsers from implementing the later selectors if it doesn't understand that (since\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7873"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=7873"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7873\/revisions"}],"predecessor-version":[{"id":7874,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/7873\/revisions\/7874"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=7873"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=7873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}