[Support request] Icons in Form Fields

Home Forums Support Icons in Form Fields

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #418275
    Mark

    Hi guys,

    Looking for a bit of help.

    What I am trying to do without editing the core CSS file is remove the default background color on form fields.

    input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], textarea {
        background: #FAFAFA; <!--- THIS HERE --->
        color: #666;
        border: 1px solid #ccc;
            border-top-color: rgb(204, 204, 204);
            border-right-color: rgb(204, 204, 204);
            border-bottom-color: rgb(204, 204, 204);
            border-left-color: rgb(204, 204, 204);
        border-radius: 0;
        padding: 10px 15px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        max-width: 100%;
    }

    What I am trying to achive is adding icons into the fields. Which only seem to work when this background color is removed. I also need to remove the default clicked background color.

    Website: http://www.davemccannautocare.ie/

    Hope I explained that ok?

    Thanks for any help!

    #418537
    Leo
    Staff
    Customer Support

    Hi there,

    You should be able to modify the forms colors in Customizer > Colors > Forms.

    Let me know.

    #418567
    Mark

    Yes I can, but I’m trying to remove the background and control it in Simple CSS instead so I can add a background image which is the icon if that makes sense

    #418593
    Leo
    Staff
    Customer Support

    Can’t you remove the color using the customizer and then add the background image using CSS?

    Or that doesn’t work?

    #418596
    Mark

    Doesnt work because there is a default background css already set in the above code.

    #418705
    Leo
    Staff
    Customer Support

    Hmm then you can try adding one extra line to overwrite it:

    input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], textarea {
        background: none;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.