Created
November 2, 2016 10:42
-
-
Save Akiyamka/63dbc12e3157dee95a1fd8d519850b36 to your computer and use it in GitHub Desktop.
Анимация движения лейбла
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
label { | |
position: relative; | |
display: inline-block; | |
} | |
label span { | |
position: absolute; | |
left: 20px; | |
top: -2em; | |
font-size: .75em; | |
cursor: text; | |
color: dodgerblue; | |
transition: all 150ms ease; | |
} | |
input { | |
border: 2px solid #f2f2f2; | |
outline: none; | |
} | |
input:valid { | |
border-color: #42d142; | |
} | |
input:invalid { | |
border-color: #ff8e7a; | |
} | |
input.empty { | |
border-color: #d9d9d9; | |
} | |
input.empty + span { | |
top: 50%; | |
transform: translateY(-50%); | |
font-size: 1em; | |
background: none; | |
color: #cccccc; | |
} | |
body { | |
display: flex; | |
min-height: 100vh; | |
background: #f1f1f1; | |
font-family: 'Lato', sans-serif; | |
font-size: 150%; | |
} | |
form { | |
margin: auto; | |
} | |
input, button { | |
padding: 15px 20px; | |
border-radius: 1px; | |
border: 2px solid #bdbdbd; | |
} | |
button { | |
border-color: #616161; | |
background: #616161; | |
color: #f6f7f8; | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form> | |
<label> | |
<input type="text" pattern=".{3,}" required title="Enter at least 3 characters."> | |
<span>First Name</span> | |
</label> | |
<button>Submit</button> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('input:empty, textarea:empty').addClass('empty'); | |
$('input').focus(function () { | |
$(this).removeClass('empty'); | |
}); | |
$('input').focusout(function () { | |
if($(this).val()==""){ | |
$(this).addClass('empty'); | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment