CSS3 - Focus input animation effects - half -vertical border
============================================================
<body>
<div class="input-wrapper">
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</div>
</body>
<style>
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: 8px;
bottom: 10px;
left: 20px;
font-size: 11px;
opacity: 1;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
transition: 0.2s ease all;
}
.input-wrapper {
position: relative;
}
input{
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
width: 300px;
border-radius: 2px;
border: none;
padding-left: 7px;
height: 34px;
font-size: 14px;
color: #aaa;
margin-top: 10px;
margin-bottom: 5px;
}
input:focus {
outline: none;
box-shadow: none;
}
.input-wrapper:after {
position: absolute;
border: 1px solid #ccc;
border-top: none;
height: 5px;
width: 100%;
bottom: 6px;
left: 0;
content: "";
}
body{width:300px;}
</style>
============================================================
<body>
<div class="input-wrapper">
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</div>
</body>
<style>
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: 8px;
bottom: 10px;
left: 20px;
font-size: 11px;
opacity: 1;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
transition: 0.2s ease all;
}
.input-wrapper {
position: relative;
}
input{
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
width: 300px;
border-radius: 2px;
border: none;
padding-left: 7px;
height: 34px;
font-size: 14px;
color: #aaa;
margin-top: 10px;
margin-bottom: 5px;
}
input:focus {
outline: none;
box-shadow: none;
}
.input-wrapper:after {
position: absolute;
border: 1px solid #ccc;
border-top: none;
height: 5px;
width: 100%;
bottom: 6px;
left: 0;
content: "";
}
body{width:300px;}
</style>
No comments:
Post a Comment