Tenho esta seguinte página de login: https://jsfiddle.net/rafael_breno/qzkgqt9h/ Está simples do jeito que esperava, porém quando eu insiro qualquer informação nos campos(input), o placeholder volta para o campos quando vou para o próximo campo, como poderia resolver isto?
-
Vc está usando label e não plaeholder. Mas dá pra brincar usando uma função js– Bruno MoralesCommented 29/10/2017 às 20:15
-
Você consegue resolver isso com JavaScript/JQuery. Dá uma olhada nesse exemplo: jsfiddle.net/Reinaldo_henrique/a5vnekjo Encontrei esta solução neste vídeo: youtube.com/watch?v=PBGfqGANYNI– Reinaldo HenriqueCommented 30/10/2017 às 19:58
Adicione um comentário
|
2 Respostas
Vc pode resolver isso colocando required
no input
e depois fazendo um estilo pro input:valid
Não sei se vai resolver pro seu caso, mas da uma olhada no exemplo abaixo que está funcionando certinho.
* { box-sizing:border-box; }
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align:center;
margin-top: 4em;
}
h1, h3 { font-weight: 300; }
h1 { color: #636363; }
h3 { color: #4a89dc; }
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
-webkit-transition:all 0.2s ease;
transition: all 0.2s ease;
}
/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
-webkit-transform: scale(.75);
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
input:valid ~ label, input.used ~ label {
top: -20px;
-webkit-transform: scale(.75);
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: green;
}
/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
-webkit-transition:all 0.2s ease;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* Animations */
@-webkit-keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
/* Button */
.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 1em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
-webkit-transition:all 0.15s ease;
transition: all 0.15s ease;
}
.button:focus { outline: 0; }
/* Button modifiers */
.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover { background: #357bd8; }
/* Ripples container */
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */
.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
-webkit-animation: ripples .4s ease-in;
animation: ripples .4s ease-in;
}
/* Ripples animation */
@-webkit-keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
@keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
footer { text-align: center; }
footer p {
color: #888;
font-size: 13px;
letter-spacing: .4px;
}
footer a {
color: #4a89dc;
text-decoration: none;
-webkit-transition:all .2s ease;
transition: all .2s ease;
}
footer a:hover {
color: #666;
text-decoration: underline;
}
footer img {
width: 80px;
-webkit-transition:all .2s ease;
transition: all .2s ease;
}
footer img:hover { opacity: .83; }
footer img:focus , footer a:focus { outline: none; }
<body>
<hgroup>
<h1><a href="#" target="_blank"><img src="web/images/logo.png"></a></h1>
<h3>Gerenciador de OS</h3>
</hgroup>
<form action="verifica_login.php" method="post">
<div class="group">
<input type="text" name="usuario" syze="20" maxlength="40" required><span class="highlight"></span><span class="bar"></span>
<label>User</label>
</div>
<div class="group">
<input required type="password" name="senha" syze="20" maxlength="40"><span class="highlight"></span><span class="bar"></span>
<label>Password</label>
</div>
<button type="submit" name="button" class="button buttonBlue" value="1">Login
<div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
</button>
</form>
<footer>
</footer>
</body>
OBS: vc ainda pode usar o css
para fazer um estilo pro input
quando ele for invalide
.
Segue um bom exemplo para você:
body {
margin: 0;
padding: 0;
background: url(https://picsum.photos/2500/1500?image=1041);
background-size: cover;
font-family: sans-serif;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.6);
border-radius: 0.625rem;
}
.box h2 {
margin: 0 0 1.875rem;
padding: 0;
color: #fff;
text-align: center;
}
.box .inputBox {
position: relative;
}
.box .inputBox input {
width: 100%;
padding: 0.625rem 0;
font-size: 1rem;
color: #fff;
letter-spacing: 0.062rem;
margin-bottom: 1.875rem;
border: none;
border-bottom: 0.065rem solid #fff;
outline: none;
background: transparent;
}
.box .inputBox label {
position: absolute;
top: 0;
left: 0;
padding: 0.625rem 0;
font-size: 1rem;
color: #fff;
pointer-events: none;
transition: 0.5s;
}
.box .inputBox input:focus~label,
.box .inputBox input:valid~label,
.box .inputBox input:not([value=""])~label {
top: -1.125rem;
left: 0;
color: #03a9f4;
font-size: 0.75rem;
}
.box input[type="submit"] {
border: none;
outline: none;
color: #fff;
background-color: #03a9f4;
padding: 0.625rem 1.25rem;
cursor: pointer;
border-radius: 0.312rem;
font-size: 1rem;
}
.box input[type="submit"]:hover {
background-color: #1cb1f5;
}
<div class="box">
<h2>Login</h2>
<form>
<div class="inputBox">
<input type="email" name="email" required onkeyup="this.setAttribute('value', this.value);" value="">
<label>Username</label>
</div>
<div class="inputBox">
<input type="password" name="password" required value="" onkeyup="this.setAttribute('value', this.value);" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<label>Password</label>
</div>
<input type="submit" name="sign-in" value="Sign In">
</form>
</div>