https://legacy.forums.gravityhelp.com/topic/target-label-by-input-type-to-vertically-align-label Gravity Support Forums Topic: Target label by input type to vertically align label en-US Sun, 19 Apr 2026 23:48:03 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/target-label-by-input-type-to-vertically-align-label#post-238313 Sun, 05 May 2013 09:38:58 +0000 Kevin Flahaut 238313@https://legacy.forums.gravityhelp.com/ <p>Why not just set the label height for the .gfield_label class globally, then use CSS inheritance to reset/tweak the labels included in the checkbox and radio lists if need be? Here's an example of what I'm talking about.</p> <pre><code>[css] label.gfield_label { color: red !important; background-color: #000; } ul.gfield_radio li label, ul.gfield_checkbox li label { color: green !important; font-weight:bold; background-color: yellow; }</code></pre> <p><a href="http://i.imgur.com/7e3f7KW.jpg" rel="nofollow">http://i.imgur.com/7e3f7KW.jpg</a></p> <p>You might need to go back and adjust the CSS spacing for the select elements as well but I'll be honest, those are a pain the butt to get just right anyhow because of differences in how the browsers render the control.</p> <p>beyond that, you might want to look at a jQuery solution to specifically target any labels that precede text inputs and manipulate the styles or to add an additional class. </p> https://legacy.forums.gravityhelp.com/topic/target-label-by-input-type-to-vertically-align-label#post-237032 Sat, 04 May 2013 12:29:22 +0000 Richard Vav 237032@https://legacy.forums.gravityhelp.com/ <p>Another way would be to add a custom class to the 'CSS Class Name' found on the advanced tab of each field you want to align and then create a rule in your stylesheet for that custom class such as<br /> <pre><code>.mycustomclass label.gfield_label { line-height: 32px; }</code></pre> https://legacy.forums.gravityhelp.com/topic/target-label-by-input-type-to-vertically-align-label#post-236897 Sat, 04 May 2013 10:37:13 +0000 Nick5a1 236897@https://legacy.forums.gravityhelp.com/ <p>Hi Steve,</p> <p>Thanks for your reply. I realise I can individually set the line height on each field, but I'm constantly creating new forms, including custom forms for every post, so I'm looking for a way to target all text type inputs and then not have to touch the css again. </p> https://legacy.forums.gravityhelp.com/topic/target-label-by-input-type-to-vertically-align-label#post-236812 Sat, 04 May 2013 08:53:19 +0000 Steve Napierski 236812@https://legacy.forums.gravityhelp.com/ <p>This CSS targets just the labels of the text-types in this form:</p> <pre><code>#field_1_1 label.gfield_label, #field_1_2 label.gfield_label, #field_1_7 label.gfield_label { line-height: 32px; }</code></pre> <p>Hope this answers your question. </p> https://legacy.forums.gravityhelp.com/topic/target-label-by-input-type-to-vertically-align-label#post-235832 Fri, 03 May 2013 20:05:50 +0000 Nick5a1 235832@https://legacy.forums.gravityhelp.com/ <p>I've increased the font size of all of the text, email, url, tel, number etc inputs across all forms. Now that these text inputs are higher, when labels are left aligned, they are not vertically aligned. I can correct this by increasing the line height of the labels by targeting <code>.gform_wrapper .gfield_label</code>. But this increases the line-height of all labels, including radio buttons and select inputs, which then makes them misaligned.</p> <p>How can I increase the line-height of the labels for <u>just</u> the text type inputs?</p> <p>EDIT: Here's my <a href="http://trialfacts.com/wp/new-trials-mailing-list/" rel="nofollow">form</a>.</p> <p>Or could there be another way to achieve the vertical label alignment? </p>