如何使用物化 css 和自己的样式表设置 WP Contact Form 7 插件表单的样式？答案

【问题标题】：How to style WP Contact Form 7 Plugin Form using materialize css and Own stylesheet?如何使用物化 css 和自己的样式表设置 WP Contact Form 7 插件表单的样式？
【发布时间】：2017-10-02 23:20:51
【问题描述】：

我的网站我正在使用 WordPress 联系表 7 从我的用户那里获取一些信息。该网站是使用materialize css框架构建的。

现在我想使用我的自定义 css 样式并将 css 样式具体化到表单中。所以我正在使用以下代码。但它不是样式。

谁能告诉我如何设置这个表单的样式？

<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
[email* your-email id:icon_prefix class:validate]
<label for="icon_prefix">Your Email</label>
</div>
</div>

【问题讨论】：

标签： css wordpress materialize contact-form-7

【解决方案1】：

我也修改了与@user7346350 相同的解决方案，用于工作税区和图标焦点

 $('input').focus(function(e) {
var name = $(this).attr('id');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').addClass('active');
    $(this).parent().siblings('i').addClass('active');
}});

$('input').blur(function(e) {
var name = $(this).attr('id');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').removeClass('active');
    $(this).parent().siblings('i').removeClass('active');
}});

$('textarea').focus(function(e) {
var name = $(this).attr('id');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').addClass('active');
    $(this).parent().siblings('i').addClass('active');
}});

$('textarea').blur(function(e) {
var name = $(this).attr('id');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').removeClass('active');
    $(this).parent().siblings('i').removeClass('active');
}});

【讨论】：

【解决方案2】：

我最近在一个项目中遇到了同样的问题。通过将此 jquery 代码添加到我的 js 文件中，我能够在表单中保持具体化的样式：

$('input').focus(function(e) {
var name = $(this).attr('name');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').addClass('active');
}});

$('input').blur(function(e) {
var name = $(this).attr('name');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').removeClass('active');
}});

此代码的作用是将“活动”类添加到焦点文本字段的标签中，并在其模糊时将其删除。所以，你的代码是正确的。只需添加此 sn-p add，您也将在文本字段中进行转换。

您遇到此问题的原因是由于联系表单 7 添加为您的电子邮件字段的父级的包装器 span 元素。

【讨论】：