My WordPress theme uses a dark background and everything is fine on my contact page, except when I use the dropdown menu in contact form 7. Then there becomes a styling issue with just that box.
http://www.unaneary.co.uk/?page_id=23
In contact form 7 panel, this is my code line:-
If your enquiry is specific, please choose from the list
[select menu-672 “Photoshop” “Web Content Editing” “General Typing or Admin” “IT” “Ebay Trading”]
so my guess is, I need to put some sort of extra coding in style.css
It is probably really easy but I am new to contact forms and I was told use Contact Form 7 it is really easy
So, I must be having a ‘bad coding day’
Your help would be greatly appreciated as I have now spent a few hours scratching my head over this ie adding different lines of code to the style.css, but the dropdown box still shows up with that light grey box 🙁
Here is the forms section styling.
FORMS
fieldset {
border: none;
}
form {
background: #22211f;
padding: 20px;
}
form ul {
list-style: none;
}
form ul li {
padding-bottom: 10px;
}
form.contact {
width: 550px;
}
label {
text-transform: uppercase;
color: #999;
font-size: 12px;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="file"], textarea {
background: #3c3a39 url(images/bg-input.png);
border: 1px solid #252321;
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 14px !important;
width: 220px;
padding: 7px !important;
}
input[type="submit"] {
color: #fff;
background: url(images/bg-button-gold.png);
padding: 7px 18px 7px;
display: inline-block;
margin-top: 10px;
margin-right: 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
font-size: 14px;
border: none;
}
input:focus, textarea:focus {
background: #3c3a39 url(images/bg-input-ro.png);
}
textarea {
width: 480px;
height: 150px;
padding: 7px !important;
font-size: 14px !important;
}
#submit-comment {
float: right;
}
You simply need to add some style rules for your form’s select dropdown. None of the css rules above will target the form’s select element.
Plenty of articles on this:
http://css-tricks.com/dropdown-default-styling/
http://bavotasan.com/2011/style-select-box-using-only-css/
just add the contact form 7 class as such: