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 😛 ***

Advertisements