WPコンタクトフォーム7プラグインフォームの作成方法マテリアライズCSSと独自のスタイルシートを使用していますか？

Question

私のウェブサイト私は、WordPressのコンタクトフォーム7を使用して、ユーザーから情報を入手しています。このWebサイトは、materialize css Frameworkを使用して構築されています。

私は自分のカスタム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> 

Answer 1

最近、プロジェクトで同じ問題が発生しました。私は自分のjsファイルにこのjqueryのコードを追加して、フォームでマテリアライズのスタイルを維持することができました：

このコードは、テキストフィールドのラベルにクラス「アクティブ」を追加することでどういう

$('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'); 
}}); 

焦点が合っていて、ぼやけているときは取り除く。したがって、あなたのコードは正しいです。このスニペットを追加するだけで、テキストフィールドにもトランジションが追加されます。

この問題が発生した理由は、連絡先フォーム7がメールフィールドの親として追加するラッパースパン要素によるものです。

Answer 2

私は仕事のtaxtareaとアイコンフォーカスのため、@ 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'); 
}});