入力にテキストがあるときのプレースホルダ位置

Question

入力テキストがフォーカスのときにプレースホルダスタイリングを実行する方法は、プレースホルダは引き続き表示され、font-sizeは小さくなります。このような例：

私はWebKitのサポートを必要とします。 Webkitはそのようなことをサポートしていますか？私はこのためのWebKitのサポートがないと思います

Answer 1

.input { 
 
    width: 200px; 
 
    height: 35px; 
 
    outline:0; 
 
    padding:0 10px; 
 
} 
 
.label { position: absolute; 
 
    pointer-events: none; 
 
    left: 20px; 
 
    top: 18px; 
 
    transition: 0.2s ease all; 
 
} 
 
input:focus ~ .label, 
 
input:not(:focus):valid ~ .label{ 
 
    top: 10px; 
 
    bottom: 5px; 
 
    left: 20px; 
 
    font-size: 12px; 
 
}

<div> 
 
    <input type="text" class="input" required/> 
 
    <span class="label">Company Name</span> 
 
</div>

Answer 2

//------ contact us dropdown list 
$(document).ready(function(){ 
$(".form-group .form-control").focus(function() { 
    $(this).parent().addClass('inputFous'); 
}).blur(function() { 
    if($.trim($(this).val()) == '') 
    { 
     $(this).parent().removeClass('inputFous'); 
    }  
}); 
}); 

、お手伝いをします。このコードをチェックしてください： - Jsfiddle

Answer 3

あなたはlabel要素を使用し、それに応じて変更する必要があります。これは、カスタム要素が必要になります

function fillClass() { 
 
    if ($(this).val() != '') 
 
    $(this).parent().addClass('input--filled'); 
 
    else 
 
    $(this).parent().removeClass('input--filled'); 
 
} 
 

 

 
$(".sign-in-input").focusout(fillClass);

.sign-in-input-ctr { 
 
    width: 100%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-bottom: 25px; 
 
    position: relative; 
 
    margin-top: 50px; 
 
} 
 
.sign-in-input { 
 
    width: 100%; 
 
    border: 2px solid transparent; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    height: 38px; 
 
    background-color: #fff; 
 
    outline: none; 
 
    border: 1px solid rgba(73, 73, 73, 0.2); 
 
    border-radius: 2px; 
 
    padding-left: 10px; 
 
} 
 
.sign-in-input:focus, 
 
.input--filled .sign-in-input { 
 
    background-color: transparent; 
 
    border: 1px solid #a09e9e; 
 
} 
 
.sign-in-label { 
 
    width: 100%; 
 
    font-size: 12px; 
 
    position: absolute; 
 
    top: -18px; 
 
    pointer-events: none; 
 
    overflow: hidden; 
 
    padding: 0 15px; 
 
    left: 0; 
 
    -webkit-transform: translate3d(0, 30px, 0); 
 
    transform: translate3d(0, 30px, 0); 
 
    -webkit-transition: -webkit-transform 0.3s; 
 
    transition: transform 0.3s; 
 
} 
 
.sign-in-input:focus+.sign-in-label, 
 
.input--filled .sign-in-label { 
 
    -webkit-transform: translate3d(-15px, 0, 0); 
 
    transform: translate3d(-15px, 0, 0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sign-in-input-ctr"> 
 
    <input class="sign-in-input" type="text" name="email"> 
 
    <label class="sign-in-label" for="signin-email"><span class="input-label-content">Email</span> 
 
    </label> 
 
</div>