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.

Minor styling issue

  1. Athen
    Member

    Hi there!

    Love the form, so clever ;)

    I have a issue on my site, all the fields are styled correctly, except two fields? I really don't get it, have been looking with firebug, but cannot find anything making a difference?

    Have a look: http://aspeakers.ondesign.dk/speakers/soulaim-gourani/ (bottom of page)

    Posted 10 years ago on Wednesday October 5, 2011 | Permalink
  2. Those are the HTML 5 field types ( tel & email ) and it looks like your theme doesn't have styles for them. You can either turn off the HTML5 option in your form settings, or edit the existing style rules to your theme stylesheet to support them.

    starting around line 110 of your style.css file has this..

    [css]
    input[type="text"],
    input[type="password"],
    textarea {
        background-color: #F6F6F6;
        border-color: #CCCCCC #EFEFEF #EFEFEF #CCCCCC;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-style: solid;
        border-width: 1px;
        font-size: 12px;
        padding: 9px 12px;
    }
    
    input[type="text"]:focus,
    input[type="password"]:focus,
    textarea:focus {
        background-color: #FFFFFF;
    }

    you can edit that and add the new input types to the rule like this..

    [css]
    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea {
        background-color: #F6F6F6;
        border-color: #CCCCCC #EFEFEF #EFEFEF #CCCCCC;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-style: solid;
        border-width: 1px;
        font-size: 12px;
        padding: 9px 12px;
    }
    
    input[type="text"]:focus,
    input[type="url"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    textarea:focus {
        background-color: #FFFFFF;
    }

    That should get you rolling..

    screenshot: http://bit.ly/pccIk3

    Posted 10 years ago on Wednesday October 5, 2011 | Permalink
  3. Athen
    Member

    Nice! ;)

    Posted 10 years ago on Wednesday October 5, 2011 | Permalink
  4. Oh, I just noticed that you're using a WooTheme so you might have to add those new rules to the end of your custom.css file rather than editing the style.css file. I think they discourage editing the default and provide the custom.css just for that purpose.

    Posted 10 years ago on Wednesday October 5, 2011 | Permalink