Archived topic
Icons in Form Fields
5 replies · Started by Mark on November 8, 2017
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!
Hi there,
You should be able to modify the forms colors in Customizer > Colors > Forms.
Let me know.
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
Can't you remove the color using the customizer and then add the background image using CSS?
Or that doesn't work?
Doesnt work because there is a default background css already set in the above code.
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;
}