CODEWITHSUNDEEP
csswordpressforms
UnaN
UnaN

Reputation: 45

Wordpress contact form 7 drop down menu styling issue

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

Upvotes: 1

Views: 46146

Answers (1)

scmccarthy22
scmccarthy22

Reputation: 631

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
}

Upvotes: 4

Related Questions