PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Styling submit button

  1. Due to a minor conflict with my theme, when I use a form in the footer widget I have to style it to make it look perfect. I'm trying to style the submit button to have a white background and black letters - whereas my form fields have black background and white letters. I've inserted the code below, but I am doing something wrong because the first string is taking over the submit button specific code. By itself, the submit code works, and the other code works as well, but together the submit specific code is ignored or "overruled" by the first code. Any advice?

    #gform_input_4{
    background-color:#000000 !important;
    border-color:#313131 !important;
    }
    #gform_submit_button_4 {
    background-color:#ffffff !important;
    color:#000000 !important;
    }
    Posted 13 years ago on Monday July 2, 2012 | Permalink
  2. Could you post a link to your form?

    Posted 13 years ago on Monday July 2, 2012 | Permalink
  3. Bottom right footer. Thanks for any help Rob. http://emergerbanquet.com/

    Posted 13 years ago on Monday July 2, 2012 | Permalink
  4. This should do the trick for you:

    [css]
    #gform_input_4{
    background-color:#000000 !important;
    border-color:#313131 !important;
    }
    #gform_input_4 #gform_submit_button_4 {
    background-color:#ffffff !important;
    color:#000000 !important;
    }

    You could alternatively target your input's by the type attribute which would then, not affect the submit input.

    Posted 13 years ago on Monday July 2, 2012 | Permalink
  5. No changes, but, I also noticed that I was using #gform_wrapper_4 rather than the #gform_input_4

    So my actual code (with your changes above) is as follows (note that I did try it with your code above as well with no changes to submit button). Ultimately what I want to learn to do is to target the type attribute specifically, but I failed in all my efforts to do so. If you can show me an example of how to do that, it'll probably prevent me from asking styling questions in the future because that is the power I would prefer to have over the specific fields...

    #gform_wrapper_4 input{
    background-color:#000000 !important;
    border-color:#313131 !important;
    }
    #gform_input_4 #gform_submit_button_4 {
    background-color:#ffffff !important;
    color:#000000 !important;
    }
    Posted 13 years ago on Monday July 2, 2012 | Permalink
  6. Dude, I apologize - my snippet was incorrect, should have been #gform_wrapper_4 instead of #gform_input_4 (that doesn't even exist - was just a typo on my part). At any rate let's review here. Right now you have this:

    [css]
    #gform_wrapper_4 input {
    background-color: black !important;
    border-color: #313131 !important;
    }

    Instead of that, replace it with this to target only these input types:

    [css]
    #gform_wrapper_4 input[type="text"], #gform_wrapper_4 input[type="url"], #gform_wrapper_4 input[type="email"], #gform_wrapper_4 input[type="tel"], #gform_wrapper_4 input[type="number"], #gform_wrapper_4 input[type="password"] {
    background-color: black !important;
    border-color: #313131 !important;
    }

    Then use just this for the submit button:

    [css]
    #gform_submit_button_4 {
    background-color: #fff;
    color: #000 !important;
    }

    Screenshot

    Posted 13 years ago on Monday July 2, 2012 | Permalink
  7. Nailed it! (and the type was mine because I told you #gform_input_4 in my original post).

    Just so I understand, does the input[type="variable"] that you used cover all of the GF types possible? I just want to understand so that I can choose to target specific types later.

    And, for my further education, let's say I had two email fields and I wanted to target a specific one in CSS to change border or background, how do I target a specific instance of a specific type?

    Posted 13 years ago on Monday July 2, 2012 | Permalink
  8. That does cover all of the text-based inputs that we use. If you did want to target a specific input - that is when you would then use the ID on the input or the ID on the li to target that element.

    So either input#fieldid1 or li#fieldid1 input[type="email"] - this would be a hypothetical example.

    Posted 13 years ago on Monday July 2, 2012 | Permalink
  9. Thank you Rob. My apologies for one more question, but that is how I how I presumed to do field-specific targeting. I just am not sure where to look when editing a form to know a field's ID# (or, is it just logical? The first field is field 1, second is field 2, etc.)?

    Posted 13 years ago on Monday July 2, 2012 | Permalink
  10. Oh, duh! Haha. Sorry Rob, I see the field ID now. Not sure how I missed that. This can be closed and thanks so much for your help!

    Posted 13 years ago on Monday July 2, 2012 | Permalink

This topic has been resolved and has been closed to new replies.