Wordpress contact form 7 drop down menu styling issue

Question

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

Answer 1

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:

.wpcf7-form select {
    rules here
}