Google style text fields using float labels

The examples

The basics

The HTML

The aim was to keep the HTML as simple and accessible as possible. What I ended up with was simply an input element wrapped in a label, with a span element for the label text which we'll position using CSS.

<label>
	<input type="text" name="name" value="">
	<span>Name</span>
</label>

The CSS

The CSS is where the magic happens. We have our label, input, and span to provide basic style and (very important in this case) position.

First we define our label style. The height defines the height of our entire element, if we change this, we will need to change the height and / or padding of our input element, and the position of our span element. A cursor is defined to ensure the expected cursor for an input element is shown wherever we hover on the element.

label {
	display: inline-block;
	width: auto;
	height: 60px;
	font-size: 12pt;
	font-family: sans-serif;
	background-color: #EFEFEF;
	color: #555;
	border-radius: 4px;
	overflow: hidden;
	cursor: text;
}

We are going to fill out our entire label element with our input using a combination of height and padding. The width we apply here determines the width of our entire element. Lastly we provide a bottom border and apply a transition value, to make style changes appear more smoothly.

label input {
	display: block;
	height: 40px;
	width: 200px;
	padding: 18px 10px 0 10px;
	background-color: #EFEFEF;
	color: #444;
	font-size: 1em;
	border: 0;
	border-bottom: 2px solid #555;
	transition: 0.3s;
}

With our input element filling out our label, we need to position our helpful span element. We move its relative position up, and make the initial text size a bit larger for when the input value is still empty. To make our transition smooth and consistent, we give it the same value as we gave our input element.

label span {
	position: relative;
	top: -44px;
	font-size: 1.25em;
	padding: 0 10px;
	transition: 0.3s;
}

To make it clear we are hovering over the input element we'll make the background a tad lighter. We'll keep this lighter background when it has focus too.

label:hover input, label input:focus {
	background-color: #F5F5F5;
}

We want to move our label text out of the way when we start typing, to do that we reposition our span element and resize the text when the input has focus. As an extra focus indicator we'll also change the text color.

label input:focus + span {
	top: -58px;
	font-size: 0.9em;
	color: #55F;
}

Lastly we define a text and border color on our input to indicate focus. I disabled the standard outline, you should only do that when you provide adequate alternative focus indicators.

label input:focus {
	outline: none;
	color: #55F;
	border-bottom-color: #55F;
}

With this we get this text field that's pretty nice already, but after we type something things get ugly when we lose focus (isn't that a universal truth?).

Losing focus with style

<label>
	<input type="text" name="name" value="" placeholder=" ">
	<span>Name</span>
</label>

label input.placeholder:not(:placeholder-shown) + span {
	top: -58px;
	font-size: 0.9em;
}

<label>
	<input type="text" name="name" value="" required>
	<span>Name</span>
</label>

label input.required:valid + span {
	top: -58px;
	font-size: 0.9em;
}

<label>
	<input type="text" name="name" value="" onkeyup="checkValue(this)">
	<span>Name</span>
</label>

function checkValue(input) { 
	if (input.value != '') { 
		input.classList.add('notblank'); 
	} else { 
		input.classList.remove('notblank'); 
	}
}

label input.notblank + span {
	top: -58px;
	font-size: 0.9em;
}

Notes on accessibility

While this element is accessible in a technical and semantical sense using methods 2 or 3, you should always consider the text sizes and color contrast, and provide adequate label text. If a field is required, be sure to signal this clearly to the user with explanation of any requirements.

Recommended reading:

Relevant documentation: