etykieta wejścia i float z wzorem

Mam problem z tagiem wejściowym i oznaczam jego float. Wszystko działa poprawnie, ale po wstawieniu wzorca na wejściu, jeśli ten wzór nie jest satysfakcjonujący, efekt float nie jest realizowany, a tekst wejściowy nakłada się z etykietą. Mam nadzieję, że było jasne, przepraszam za mój angielski.etykieta wejścia i float z wzorem

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

Źródło

2016-01-04 Daniele

To rzeczywiście wygląda dobrze, kiedy coś wejściowego. Na czym dokładnie polega problem? Czy możesz powiedzieć krok po kroku, aby się rozmnażać? –

dodaj do wejścia mniej niż 3 znaki, a następnie kliknij poza wejściem, aby wejście straciło ostrość, o czym myślę, że OP mówi. Pozwala etykietę i wartość z nakładania się danych wejściowych. –

Okay, właśnie się dowiedziałem, że jeśli umieścisz '/', to pokrywa się, ponieważ jest niepoprawne. –

chciałbym zasugerować to, jeśli chcesz zachować animację nienaruszone. Sprawdzanie poprawności danych wejściowych powinno odbywać się za pomocą JavaScript i wprowadzić dane wejściowe, po prostu być required. Wyjąć pattern całkowicie i dać coś takiego:

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

Albo można zrobić animację zdarzyć dodając nową klasę do input użyciu JavaScript/jQuery. A czyste rozwiązanie CSS, ponieważ oba mogą nie być możliwe. Powiedziałem, że nie, ponieważ nie mogę o tym myśleć. Zobaczmy, czy ktoś inny znajdzie rozwiązanie.

Alternatywne rozwiązanie przy użyciu 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>

Źródło

2016-01-04 13:51:28

etykieta wejścia i float z wzorem

Odpowiedz

Powiązane problemy