フォーカス上の入力の上にプレースホルダを移動

Question

フォーカス上の入力の上にプレースホルダテキストを移動するCSSコードを探しています。私はこのコードを見つけたhere。このコードは完璧ですが、私の入力タグは<span>の中にラップされています。そのため、一般的な兄弟セレクタは機能しません。任意のアイデアはどのようにこのCSSを編集するには？与えられたリンクCSSなどで

<div> 
    <span class='blocking-span'> 
    <input type="text" class="inputText" /> 
    </span> 
    <span class="floating-label">Your email address</span> 
</div> 

Answer 1

、単にblocking-span内floating-labelを移動します。それはあなたがhtml構造を変更する場合は、あなたの参考例が仕事であるblocking-span

div { 
 
    position: relative; /* make label relate to div */ 
 
    padding-top: 10px; /* make space for label  */ 
 
} 
 
.inputText { 
 
    font-size: 14px; 
 
    width: 200px; 
 
    height: 25px; 
 
} 
 
.floating-label { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 15px; 
 
    top: 18px; 
 
    transition: 0.2s ease all; 
 
} 
 
input:focus ~ .floating-label, 
 
input:not(:focus):valid ~ .floating-label { 
 
    top: -6px; 
 
}

<div> 
 
    <span class='blocking-span'> 
 
    <input type="text" class="inputText" required/> 
 
    <span class="floating-label">Your email address</span> 
 
    </span> 
 
</div>

Answer 2

外であったが、あればあるかのようdivfloating-labelはまだだろう再位置にposition: relativeを使用することにより

変更する必要はありません。html構造体を作成し、jQueryを少し作成する必要があります。これを確認することができます。

$(function(){ 
 
    $('.blocking-span input').on('focus', function(){ 
 
    $(this).parents('.parents-elm').addClass('foucs-content'); // When focus the input area 
 
    }); 
 
    $(document).mouseup(function(e){ 
 
\t \t if($(e.target).parents('.blocking-span input').length==0 && !$(e.target).is('.blocking-span input')){ 
 
\t \t \t $('.parents-elm').removeClass('foucs-content'); 
 
\t \t } 
 
\t }); 
 
});

div{ 
 
    position: relative; 
 
} 
 
.blocking-span{ 
 
    display: block; 
 
} 
 
.blocking-span input{ 
 
    border: 1px solid #eaeaea; 
 
    height: 80px; 
 
    padding-top: 30px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    width: 100%; 
 
} 
 
.floating-label{ 
 
    display: inline-block; 
 
    font-size: 15px; 
 
    left: 20px; 
 
    line-height: 20px; 
 
    position: absolute; 
 
    top: -webkit-calc(50% - 10px); 
 
    top: -moz-calc(50% - 10px); 
 
    top: calc(50% - 10px); 
 
    transition: top 0.3s ease-in-out 0s; 
 
} 
 
.foucs-content .floating-label{ 
 
    top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="parents-elm"> 
 
    <span class='blocking-span'> 
 
    <input type="text" class="inputText" /> 
 
    </span> 
 
    <span class="floating-label">Your email address</span> 
 
</div>

Answer 3

私はコンタクトフォーム7を使用している、それが私にこの追加のスパンをgaves。しかし、私はすでにこの追加スパンをブロックする方法を発見しました。この連絡フォーム7スパンを削除できるフィルタがあります。ここにはlink.