[Support request] Icons in Form Fields

[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!

[Leo]

Hi there,

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

Let me know.

[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

[Leo]

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

Or that doesn’t work?

[Mark]

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

[Leo]

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;
}

[Author]

Posts