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.

Inside Shadow on fields

  1. rlpartida
    Member

    First of all! Just bought GF and it is just very easy to configure the forms! Thanks for the product and support!

    Now, I want to include some shadows inside the fileds, such as this form:

    http://www.bluefountainmedia.com/raq-form-v2

    I'll appreciate if someone helps me with the css I need to update?

    Thanks!

    Posted 8 years ago on Friday February 10, 2012 | Permalink
  2. Well, you are either going to have to create an image to set as a background, or use CSS3 box shadow (inset), which you can generate here:

    http://css3generator.com/

    You can find more structural information about design and styling here:

    http://www.gravityhelp.com/documentation/page/Design_and_Layout

    If you get stuck, post a link to your form and we can help you with the selectors to use based on your form's needs. You can also use Chrome Developer Tools or Firebug for Firefox to inspect and find the classes/ids/html to use where needed.

    Posted 8 years ago on Friday February 10, 2012 | Permalink
  3. rlpartida
    Member

    Hey Rob,

    I really appreciate your help... here is the link to the test site:

    Thanks!

    Posted 8 years ago on Friday February 10, 2012 | Permalink
  4. No problem, replace this block you have below with the one below:

    [css]
    body .gform_wrapper .gform_body .gform_fields .gfield input[type="text"], body .gform_wrapper .gform_body .gform_fields .gfield input[type="email"], body .gform_wrapper .gform_body .gform_fields .gfield input[type="url"], body .gform_wrapper .gform_body .gform_fields .gfield input[type="tel"], body .gform_wrapper .gform_body .gform_fields .gfield input[type="password"], body .gform_wrapper .gform_body .gform_fields .gfield select, body .gform_wrapper .gform_body .gform_fields .gfield textarea {
    background-color: white;
    color: #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 8px #333;
    -moz-box-shadow: inset 0 0 8px #333;
    box-shadow: inset 0 0 8px #333;
    }

    You can obviously tinker with the values there.

    Posted 8 years ago on Friday February 10, 2012 | Permalink
  5. rlpartida
    Member

    thanks Rob!

    That was perfect!

    Posted 8 years ago on Friday February 10, 2012 | Permalink
  6. Awesome! Glad to help.

    Posted 8 years ago on Friday February 10, 2012 | Permalink

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