etichetta di input e float con pattern

Ho un problema con un tag di input ed etichetta il suo float. Tutto funziona correttamente, ma quando inserisco un pattern nell'input se questo pattern non è soddisfatto dell'effetto float non viene realizzato e l'input del testo si sovrappone all'etichetta. Spero di essere stato chiaro, mi dispiace per il mio inglese.etichetta di input e float con pattern

questo è 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>

fonte

2016-01-04 Daniele

Questo sembra effettivamente un bene quando l'input ho qualcosa. Qual è esattamente il problema? Puoi gentilmente dire i passaggi da riprodurre? –

aggiungi meno di 3 caratteri all'ingresso, quindi fai clic all'esterno dell'input per lasciare che l'input perda messa a fuoco è ciò di cui penso che l'OP stia parlando. Lascia l'etichetta e il valore dalla sovrapposizione di input. –

Ok, ho appena scoperto che se metti '/' si sovrappone, poiché non è valido. –

Vorrei suggerire di questo, se si vuole mantenere intatto l'animazione. Controllare la validità dell'input, dovrebbe essere fatto usando JavaScript e fare l'input, solo essere required. Rimuovere il pattern del tutto e dare qualcosa di simile:

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

Oppure si può fare l'animazione accadere con l'aggiunta di una nuova classe al input utilizzando JavaScript/jQuery. Una soluzione pura CSS per entrambi potrebbe non essere possibile. Ho detto che no, perché, non riesco a pensarne uno. Vediamo se qualcun altro ha trovato una soluzione.

soluzione alternativa utilizzando 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>

fonte

2016-01-04 13:51:28

etichetta di input e float con pattern

risposta

Problemi correlati