https://legacy.forums.gravityhelp.com/topic/css-for-group-fields Gravity Support Forums Topic: CSS for group fields en-US Thu, 23 Apr 2026 12:42:39 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-for-group-fields#post-58311 Wed, 09 May 2012 09:50:16 +0000 Rob Harrell 58311@https://legacy.forums.gravityhelp.com/ <p>What exactly are you trying to achieve that isn't working, specifically? </p> https://legacy.forums.gravityhelp.com/topic/css-for-group-fields#post-58301 Wed, 09 May 2012 08:21:39 +0000 tanksalot 58301@https://legacy.forums.gravityhelp.com/ <p>I'm not sure I understand. The enclosed CSS is what I have now. Are there ways to streamline it? Are there redundancies I can remove safely? Thank you.</p> <pre><code>[css] .gform_wrapper .top_label .gfield_label { display:block; font-weight:normal; line-height:normal; } .gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea { height:109px; width:90%; } .gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium { height:28px; width:75%; } .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=text], .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=email], .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=tel], .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=url], .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=number], .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=password], .gform_wrapper .gform_body .gform_fields .ginput_complex select { height: 28px; } .gform_wrapper input[type=&quot;text&quot;], .gform_wrapper input[type=&quot;url&quot;], .gform_wrapper input[type=&quot;email&quot;], .gform_wrapper input[type=&quot;tel&quot;], .gform_wrapper input[type=&quot;number&quot;], .gform_wrapper input[type=&quot;password&quot;] { border:1px solid #DDD; border-top:1px solid #BBB; color:#999; font: -webkit-small-control; padding:1px 1px 1px 12px; } .gform_wrapper input[type=&quot;text&quot;]:hover, .gform_wrapper input[type=&quot;url&quot;]:hover, .gform_wrapper input[type=&quot;email&quot;]:hover, .gform_wrapper input[type=&quot;tel&quot;]:hover, .gform_wrapper input[type=&quot;number&quot;]:hover, .gform_wrapper input[type=&quot;password&quot;]:hover { border:1px solid #AAA; } .gform_wrapper input[type=&quot;text&quot;]:focus, .gform_wrapper input[type=&quot;url&quot;]:focus, .gform_wrapper input[type=&quot;email&quot;]:focus, .gform_wrapper input[type=&quot;tel&quot;]:focus, .gform_wrapper input[type=&quot;number&quot;]:focus, .gform_wrapper input[type=&quot;password&quot;]:focus { background-color:#FAFAFA; color:#666; } .gform_wrapper textarea { border:1px solid #DDD; border-top:1px solid #BBB; color:#999; font: -webkit-small-control; margin:0 0 15px 0; padding:12px 2px 2px 12px; resize:both; } .gform_wrapper textarea:hover { border:1px solid #AAA; } .gform_wrapper textarea:focus { background-color:#FAFAFA; color:#666; } #recaptcha_table { border:none !important; } .recaptchatable .recaptcha_image_cell { background-color:transparent !important; } #recaptcha_logo, #recaptcha_tagline { display:none; } .recaptchatable #recaptcha_response_field { border:1px solid #DFDFDF !important; font-size:11px !important; height:28px; line-height:1.3; padding:0; } .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=&quot;submit&quot;] { background: -moz-linear-gradient(top, #F9F9F9, #F0F0F0); background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#F0F0F0)); border: 1px solid #DEDEDE; border-color: #DEDEDE #D8D8D8 #D3D3D3; -moz-box-shadow: 0 1px 2px #EAEAEA, inset 0 1px 0 #FBFBFB; -webkit-box-shadow: 0 1px 2px #EAEAEA, inset 0 1px 0 #FBFBFB; box-shadow: 0 1px 2px #EAEAEA, inset 0 1px 0 #FBFBFB; color: #555 !important; cursor:pointer; font:bold 12px/1em HelveticaNeue, Arial, sans-serif; padding:8px 11px; text-shadow:0 1px 0 #FFF; } .gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer input.button:focus, .gform_wrapper .gform_footer input[type=&quot;submit&quot;]:hover, .gform_wrapper .gform_footer input[type=&quot;submit&quot;]:focus { background: -moz-linear-gradient(top, #F9F9F9, #E9E9E9); background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E9E9E9)); } .gform_wrapper .gform_footer input.button:active, .gform_wrapper .gform_footer input[type=&quot;submit&quot;]:active { background: #EFEFEF; background: -moz-linear-gradient(top, #EAEAEA, #F4F4F4); background: -webkit-gradient(linear, left top, left bottom, from(#EAEAEA), to(#F4F4F4)); position:relative; top:1px; } #gform_wrapper_1 { max-width:inherit; } #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label .gfield_required { display:none; }</code></pre> https://legacy.forums.gravityhelp.com/topic/css-for-group-fields#post-54596 Mon, 09 Apr 2012 08:43:17 +0000 Kevin Flahaut 54596@https://legacy.forums.gravityhelp.com/ <p>You can remove the existing height specification if you want or you can just add this (not replace anything) to the end of your stylesheet. It's really up to you and how you prefer everything to look. </p> https://legacy.forums.gravityhelp.com/topic/css-for-group-fields#post-54594 Mon, 09 Apr 2012 08:40:21 +0000 tanksalot 54594@https://legacy.forums.gravityhelp.com/ <p>Will check on the plugin conflicts next. About that CSS you provided. Does that replace whatever else is in there or an addition to it? I can pull the height CSS that is already there if needed. (just trying to keep it clean and short)</p> <p>Thanks Kevin </p> https://legacy.forums.gravityhelp.com/topic/css-for-group-fields#post-54549 Sat, 07 Apr 2012 19:33:35 +0000 Kevin Flahaut 54549@https://legacy.forums.gravityhelp.com/ <p>This should get you closer. The theme developer specified a height on the inputs, but didn't target ALL of them correctly to force the same height. You can add this to the end of your theme stylesheet.</p> <pre><code>[css] body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=text], body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=email], body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=tel], body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=url], body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=number], body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=password], body .gform_wrapper .gform_body .gform_fields .ginput_complex select { height: 28px; }</code></pre> <p>test screenshot: <a href="http://bit.ly/I3ZoBW" rel="nofollow">http://bit.ly/I3ZoBW</a></p> <p>Also, I noticed some break tags in that area of the form markup that are not normally there. Those are most likely being introduced by some other plugin or even your theme. That could be causing some layout problems itself. You may want to test for conflicts to find out where the extraneous markup is coming from.</p> <p><a href="http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict" rel="nofollow">http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict</a> </p> https://legacy.forums.gravityhelp.com/topic/css-for-group-fields#post-54523 Sat, 07 Apr 2012 06:49:55 +0000 Kevin Flahaut 54523@https://legacy.forums.gravityhelp.com/ <p>take a look at the examples here.. they should help you get to where you need to be.<br /> <a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a> </p> https://legacy.forums.gravityhelp.com/topic/css-for-group-fields#post-54510 Sat, 07 Apr 2012 00:10:46 +0000 tanksalot 54510@https://legacy.forums.gravityhelp.com/ <p>I have read a few threads on this and have experimented some but am still not able to get these fields to appear as the other throughout the site. The fields are what I will call group fields, meaning separate first and last name fields, the address fields, and the email fields if Confirm Email is activated. They are not picking up the CSS I have added. </p> <p>See <a href="http://gardensare.com/contact" rel="nofollow">http://gardensare.com/contact</a> (you have to select the first checkbox to expose the address fields) and <a href="http://gardensare.com/employment-application/" rel="nofollow">http://gardensare.com/employment-application/</a> </p> <p>How do I target these fields in these forms? </p>