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.

Default Value Field custom CSS

  1. wot
    Member

    Hi,

    How can I can I customize theCSS of a field's default value?
    I would like to have it in a light grey, italic, etc ...

    Thx for your time

    Posted 10 years ago on Monday June 24, 2013 | Permalink
  2. All of our styling information can be found here:
    http://www.gravityhelp.com/documentation/page/Design_and_Layout

    If you'd like for me to take a look and provide a CSS snippet for use, just post a link to your form for me.

    Posted 10 years ago on Monday June 24, 2013 | Permalink
  3. wot
    Member

    Hi,
    Thx for the quick response.

    I have a field Name and I display a default message: " e.g. John Smith" , I also use the small script to clear the default value "onfocus".
    I also know how to adapt the CSS for that text field but I don't find the CSS for the default value.

    Maybe there isn't one : )

    Posted 10 years ago on Monday June 24, 2013 | Permalink
  4. Ah, yes, in that case the "default value" and whatever you type will share the same style.

    Posted 10 years ago on Monday June 24, 2013 | Permalink
  5. wot
    Member

    thx

    I'll hire some Jquery ninja to have a look to it,
    If I find the solution I'll post it here.

    Posted 10 years ago on Monday June 24, 2013 | Permalink
  6. Richard Vav
    Administrator

    It sounds like you are using the default value as a placeholder, you may want to look into using a plugin or a script to add the HTML5 placeholder attribute to the inputs.

    Here are two plugins that are in the WordPress plugin repository, if I remember correctly they also hide or remove the field label
    http://wordpress.org/extend/plugins/gravity-forms-placeholders/
    http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/

    If you only have a few fields a bit of jQuery would accomplish it as well, the following example would add the placeholder Name to field 1 of form 5 for example

    <script>
    jQuery(document).ready(function($){
         $('#input_5_1').attr('placeholder','Name');
    });
    </script>

    If you have more than a few there are some functions you can add to your themes functions file that will add placeholders to the fields settings panel in the form editor.

    Posted 10 years ago on Monday June 24, 2013 | Permalink

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