Eingabe und Float-Label mit Muster

Ich habe ein Problem mit einem Eingabe-Tag und beschriften Sie seine Schwimmer. Alles funktioniert richtig lesen, aber wenn ich ein Muster in die Eingabe einfügen, wenn dieses Muster nicht mit dem Effekt zufrieden ist Float wird nicht realisiert, und die Texteingabe überlappt mit der Bezeichnung. Ich hoffe, ich war klar, Entschuldigung für mein Englisch.Eingabe und Float-Label mit Muster

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

Quelle

2016-01-04 Daniele

Das sieht wirklich gut, wenn ich etwas Eingang. Was genau ist das Problem? Kannst du bitte die Schritte erklären, um zu reproduzieren? –

Fügen Sie weniger als 3 Zeichen zur Eingabe hinzu und klicken Sie dann außerhalb der Eingabe, damit die Eingabe den Fokus verliert, worüber ich denke, dass das OP darüber spricht. Lässt das Label und den Wert aus der Eingabe überlappen. –

Okay, habe gerade herausgefunden, dass wenn Sie '/' es überlappt, da es nicht gültig ist. –

Ich würde Sie dies vorschlagen, wenn Sie die Animation intakt halten wollen. Überprüfen Sie die Gültigkeit der Eingabe, sollte mit JavaScript und machen Sie die Eingabe, nur required sein. Entfernen Sie die pattern zusammen und geben so etwas wie dieses:

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

Oder Sie können die Animation durch das Hinzufügen einer neuen Klasse zum input mit JavaScript/jQuery geschehen. Eine reine CSS Lösung für beides ist möglicherweise nicht möglich. Ich sagte vielleicht nicht, weil ich nicht an einen denken kann. Mal sehen, ob jemand anderes eine Lösung findet.

Alternative Lösung 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>

Quelle

2016-01-04 13:51:28

Eingabe und Float-Label mit Muster

Antwort

Verwandte Themen