Question

我正在撰写此页面上的联系表格： http://www.thundermailer.com/contact-us/

我使用的是一个名为Contact Form 7的插件。电子邮件字段与其他字段不同，任何想法我怎么能这样做呢？

感谢。

Answer 1

问题是您主题的CSS仅定位类型为text和password的输入

您需要为当前CSS规则添加电子邮件输入选择器，或者添加新规则以设置电子邮件输入所需的所有样式

您需要更改的相关部分是：

blue_theme.css的第571行：

form input[type="text"], form input[type="password"],form input[type="email"], form select, textarea {
    border-top: 1px solid #b2b2b2;
    border-left: 1px solid #b2b2b2;
    border-right: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    background: #f3f3f3 url(images/input_bg.png) repeat-x;
    color: #868686;
}

和main.css的第1654行

form input[type="text"], form input[type="password"], form input[type="email"], form select, textarea {
    font-size: 13px;
    margin: 0;
    padding: 8px 6px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    display: block;
}

当然，您也可以将输入的类型更改为text，但之后您将失去使用HTML5的附加功能，例如移动设备上的自动验证和自定义键盘

Answer 2

在分析代码时，电子邮件字段的输入类型为“email”，使其成为“text”。

Answer 3

您的css中有两个位置您引用表单输入[type =“text”]，而不添加表单输入[type =“email”]。

进行这些更改后，它显示与其他输入字段相同。您只需在电子邮件输入字段中更改type ='email'即可键入='text';但是，您可以找到这两个部分（一个在main.css中，一个在蓝色theme.css中），您可以在其中设置边框，背景，填充和其他设置。

联系表格7中的电子邮件字段看起来不同

3 个答案: