CSS Wordpress 联系表 7 下拉菜单样式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28242771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wordpress contact form 7 drop down menu styling issue
提问by UnaN
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.
我的 Wordpress 主题使用深色背景，我的联系页面上的一切都很好，除非我使用联系表 7 中的下拉菜单。然后就出现了该框的样式问题。
http://www.unaneary.co.uk/?page_id=23
http://www.unaneary.co.uk/?page_id=23
In contact form 7 panel, this is my code line:-
在联系表格 7 面板中，这是我的代码行：-
If your enquiry is specific, please choose from the list
[select menu-672 "Photoshop" "Web Content Editing" "General Typing or Admin" "IT" "Ebay Trading"]
如果您的查询是具体的，请从列表中
选择[选择菜单-672“Photoshop”“网页内容编辑”“常规打字或管理”“IT”“Ebay Trading”]
so my guess is, I need to put some sort of extra coding in style.css
所以我的猜测是，我需要在 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'
这可能真的很容易，但我是联系表格的新手，有人告诉我使用联系表格 7 这真的很容易 所以，我一定是度过了一个“糟糕的编码日”
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 :(
您的帮助将不胜感激，因为我现在已经花了几个小时来解决这个问题，即将不同的代码行添加到 style.css，但下拉框仍然显示为浅灰色框:(
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;
}
回答by scmccarthy22
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.
您只需要为表单的选择下拉列表添加一些样式规则。上面的 css 规则都不会针对表单的 select 元素。
Plenty of articles on this:
这方面的文章很多：
http://css-tricks.com/dropdown-default-styling/
http://css-tricks.com/dropdown-default-styling/
http://bavotasan.com/2011/style-select-box-using-only-css/
http://bavotasan.com/2011/style-select-box-using-only-css/
just add the contact form 7 class as such:
只需添加联系表单 7 类：
.wpcf7-form select {
rules here
}
