联系人表单7中的电子邮件字段看起来有所不同

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='mail'更改为type='text'；不过，您可以找到这两个部分（一个在main.css中，另一个在blue主题.css中），在这里您可以设置边框、背景、填充和其他设置。