Label Pattern with Just Css for bootstrap

labelpattern.gif

Demo: http://codepen.io/michaelguild13/pen/wMBOBj?editors=010

After reading Brad Frost’s article on the Float Label UI pattern, I started to wonder if it’s possible to do so with just pure css. So, created a codepen with it working.

My requirements are as follows

  • only display placeholder text
  • on focus, display label
  • if the input or text area contains value, keep the label displayed

I kept my markup to match bootstrap and for accessible reasons. When css is disabled, it’s  still usable. By being able to display the label on if input has value, allows the user to never loose context.  The only “Gotchya” is that the only way to display the label if it contains value, is to use the required attribute.

 Html Markup:

Screen Shot 2015-12-08 at 7.37.35 PM.png

Scss Styles:

.label-pattern {
position: relative;
overflow: hidden;
border-bottom: 1px solid grey;

label {
color: blue;
display: block;
font-size: .6rem;
font-weight: bold;
text-align: top;
padding-bottom: 1rem;
}
input, textarea {
position: absolute;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 50px;
border: none;
background-color: #fff;
transition: background-color 200ms linear;
&:focus,
&:valid{
outline: none;
border: none;
background: transparent;
&::-webkit-input-placeholder { color:transparent; }
&:-moz-placeholder { color:transparent; } /* FF 4-18 */
&::-moz-placeholder { color:transparent; } /* FF 19+ */
&:-ms-input-placeholder { color:transparent; } /* IE 10+ */
}
}
}

***btw, don’t ask why I used codepen vs jsfiddle 😛 ***

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s