WP 문의 양식 작성 방법 7 구체화 CSS 및 자체 스타일 시트를 사용하는 플러그인 양식?

Question

내 웹 사이트 사용자로부터 일부 정보를 얻기 위해 WordPress 문의 양식 7을 사용 중입니다. 웹 사이트는 구체화 된 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> 

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

나도

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

을 집중 작업 taxtarea 및 아이콘 @ user7346350와 같은 솔루션을 수정