Girdi ve şamandıra etiketi ile desen

Question

Giriş etiketiyle ilgili bir sorunum var ve yüzdelerini etiketleme. Her şey düzgün bir şekilde okunur, ancak girişe bir model eklediğimde, bu model efekt floatından memnun olmazsa ve metin girişi etiketle çakışır. Umarım açıktı, ingilizcem için üzgünüm.

bu

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

bozulmadan animasyon tutmak istiyorsanız ben bu öneririm olduğunu. Girişin geçerliliğini kontrol etmek, JavaScript kullanarak yapılmalı ve girişi yapmalısınız, sadece required olmalıdır. tamamen pattern çıkarıp vermek şey böyle:

.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>

Yoksa animasyon JavaScript/jQuery kullanarak input için yeni bir sınıf ekleyerek olmasını sağlayabiliriz. Her ikisinin de mümkün olmaması için bir saf CSS çözümü. Dedim ki yapamam çünkü bir tane düşünemiyorum. Bakalım başka biri bir çözüm buluyor mu? jQuery kullanarak

---

Alternatif çözüm:

$(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>