パターンの入力と浮動小数点ラベル

Question

入力タグに問題があり、その浮動小数点数にラベルを付けました。すべてが正しく読み取られますが、このパターンがエフェクトに満たされていない場合は、入力にパターンを挿入すると浮動小数点が認識されず、テキスト入力がラベルと重なって表示されます。私は私の英語のために申し訳ありません、私は明確だったことを願っています。

これは、あなたがそのままアニメーションを維持したい場合、私は、あなたにこのことを示唆しているCSS

.card .input-container { 
 
    position: relative; 
 
    margin: 0 60px 50px; 
 
} 
 
.card .input-container input { 
 
    outline: none; 
 
    z-index: 1; 
 
    position: relative; 
 
    background: none; 
 
    width: 100%; 
 
    height: 60px; 
 
    border: 0; 
 
    color: #212121; 
 
    font-size: 24px; 
 
    font-weight: 400; 
 
} 
 
.card .input-container input:focus ~ label { 
 
    color: #9d9d9d; 
 
    -webkit-transform: translate(-12%, -50%) scale(0.75); 
 
    transform: translate(-12%, -50%) scale(0.75); 
 
} 
 
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after { 
 
    width: 50%; 
 
} 
 
.card .input-container input:valid ~ label { 
 
    color: #9d9d9d; 
 
    -webkit-transform: translate(-12%, -50%) scale(0.75); 
 
    transform: translate(-12%, -50%) scale(0.75); 
 
} 
 
.card .input-container label { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #757575; 
 
    font-size: 24px; 
 
    font-weight: 300; 
 
    line-height: 60px; 
 
    -webkit-transition: 0.2s ease; 
 
    transition: 0.2s ease; 
 
} 
 
.card .input-container .bar { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: #757575; 
 
    width: 100%; 
 
    height: 1px; 
 
} 
 
.card .input-container .bar:before, .card .input-container .bar:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #ed2553; 
 
    width: 0; 
 
    height: 2px; 
 
    -webkit-transition: .2s ease; 
 
    transition: .2s ease; 
 
} 
 
.card .input-container .bar:before { 
 
    left: 50%; 
 
} 
 
.card .input-container .bar:after { 
 
    right: 50%; 
 
}

<div class="card"> 
 
    <h1 class="title">Login</h1> 
 
    <form> 
 
    <div class="input-container"> 
 
     <input type="text" id="Username" required="required" pattern=".{3,}" title="3 characters minimum" /> 
 
     <label for="Username">Username</label> 
 
     <div class="bar"></div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 1

です。入力の妥当性をチェックするには、JavaScriptを使用して入力を行う必要があります。ちょうどrequiredです。完全patternを削除し、このような何かを与える：

.card .input-container { 
 
    position: relative; 
 
    margin: 0 60px 50px; 
 
} 
 
.card .input-container input { 
 
    outline: none; 
 
    z-index: 1; 
 
    position: relative; 
 
    background: none; 
 
    width: 100%; 
 
    height: 60px; 
 
    border: 0; 
 
    color: #212121; 
 
    font-size: 24px; 
 
    font-weight: 400; 
 
} 
 
.card .input-container input:focus ~ label { 
 
    color: #9d9d9d; 
 
    -webkit-transform: translate(-12%, -50%) scale(0.75); 
 
    transform: translate(-12%, -50%) scale(0.75); 
 
} 
 
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after { 
 
    width: 50%; 
 
} 
 
.card .input-container input:valid ~ label { 
 
    color: #9d9d9d; 
 
    -webkit-transform: translate(-12%, -50%) scale(0.75); 
 
    transform: translate(-12%, -50%) scale(0.75); 
 
} 
 
.card .input-container label { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #757575; 
 
    font-size: 24px; 
 
    font-weight: 300; 
 
    line-height: 60px; 
 
    -webkit-transition: 0.2s ease; 
 
    transition: 0.2s ease; 
 
} 
 
.card .input-container .bar { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: #757575; 
 
    width: 100%; 
 
    height: 1px; 
 
} 
 
.card .input-container .bar:before, .card .input-container .bar:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #ed2553; 
 
    width: 0; 
 
    height: 2px; 
 
    -webkit-transition: .2s ease; 
 
    transition: .2s ease; 
 
} 
 
.card .input-container .bar:before { 
 
    left: 50%; 
 
} 
 
.card .input-container .bar:after { 
 
    right: 50%; 
 
}

<div class="card"> 
 
    <h1 class="title">Login</h1> 
 
    <form> 
 
    <div class="input-container"> 
 
     <input type="text" id="Username" required="required" title="3 characters minimum" /> 
 
     <label for="Username">Username</label> 
 
     <div class="bar"></div> 
 
    </div> 
 
    </form> 
 
</div>

それとも、アニメーションがのJavaScript/jQueryのを使用してinputに新しいクラスを追加することで実現することができます。 A 純粋なCSS両方を持つための解決策は不可能かもしれません。 私はそうではないと言いました。なぜなら、私は1つ考えることができないからです。他の人が解決策を思いついているかどうかを見てみましょう。 jQueryのを使用して

---

代替ソリューション：

$(function() { 
 
    $("input").keyup(function() { 
 
    if ($(this).val().trim().length > 0) 
 
     $(this).addClass("non-empty"); 
 
    else 
 
     $(this).removeClass("non-empty"); 
 
    }); 
 
});

.card .input-container { 
 
    position: relative; 
 
    margin: 0 60px 50px; 
 
} 
 
.card .input-container input { 
 
    outline: none; 
 
    z-index: 1; 
 
    position: relative; 
 
    background: none; 
 
    width: 100%; 
 
    height: 60px; 
 
    border: 0; 
 
    color: #212121; 
 
    font-size: 24px; 
 
    font-weight: 400; 
 
} 
 
.card .input-container input:focus ~ label { 
 
    color: #9d9d9d; 
 
    -webkit-transform: translate(-12%, -50%) scale(0.75); 
 
    transform: translate(-12%, -50%) scale(0.75); 
 
} 
 
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after { 
 
    width: 50%; 
 
} 
 
.card .input-container input.non-empty ~ label { 
 
    color: #9d9d9d; 
 
    -webkit-transform: translate(-12%, -50%) scale(0.75); 
 
    transform: translate(-12%, -50%) scale(0.75); 
 
} 
 
.card .input-container label { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #757575; 
 
    font-size: 24px; 
 
    font-weight: 300; 
 
    line-height: 60px; 
 
    -webkit-transition: 0.2s ease; 
 
    transition: 0.2s ease; 
 
} 
 
.card .input-container .bar { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: #757575; 
 
    width: 100%; 
 
    height: 1px; 
 
} 
 
.card .input-container .bar:before, .card .input-container .bar:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #ed2553; 
 
    width: 0; 
 
    height: 2px; 
 
    -webkit-transition: .2s ease; 
 
    transition: .2s ease; 
 
} 
 
.card .input-container .bar:before { 
 
    left: 50%; 
 
} 
 
.card .input-container .bar:after { 
 
    right: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="card"> 
 
    <h1 class="title">Login</h1> 
 
    <form> 
 
    <div class="input-container"> 
 
     <input type="text" id="Username" required="required" pattern=".{3,}" title="3 characters minimum" /> 
 
     <label for="Username">Username</label> 
 
     <div class="bar"></div> 
 
    </div> 
 
    </form> 
 
</div>