%fieldset
%input#example{:type => "text"}
%label{:for => "example"} Label
%div
View Compiled
fieldset {
position: relative;
width: 100%;
max-width: 200px;
input, label {
display: block;
font-family: $f;
font-size: 16px;
line-height: 1.2;
}
label {
transition: all 150ms ease-out;
will-change: transform;
transform: none;
transform-origin: center left;
display: block;
position: absolute;
z-index: 0;
left: 0;
top: 0;
width: 100%;
}
div {
position: relative;
border: 0;
margin-top: $p/3;
background-color: rgba($slate, .2);
&, &:after {
transition: all 150ms ease-out;
width: 100%;
height: 2px;
border-radius: 2px;
}
&:after {
will-change: transform;
transform-origin: left center;
transform: scaleX(0);
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background: $slate;
}
}
input {
appearance: none;
position: relative;
z-index: 1;
width: 100%;
border: 0;
margin: 0;
padding: 0;
background: none;
&:hover {
~ div {
background-color: rgba($slate, .3);
}
}
&:focus {
~ label {
transform: translateY(-100%) translateY(-2px);
font-size: 12px;
}
~ div {
&:after {
transform: none;
}
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.