Creating an Apple-Style Input Field With Display Labels

Apple is a very popular brand in the new technological age in which we live. Both designers and developers agree that Apple’s products display exquisite talent and passion for their skills. Over time user interface design has taken a turn upwards and is now one of the hottest topics amongst web designers.

Below I’ll be going over how to build a small Apple-styled input form with some basic structure and scripting. All code included is based off XHTML Transitional Doctype along with newer CSS2/CSS3 techniques. We’ll also be using the jQuery 1.4.1 library to support our display label functions.

Try It Out

Here’s a sneak peak of what we’ll be building. Check out the demo page to see it live and download the example for a closer look.

Live DemoDownload

jQuery Apple Input Field - Demo Graphic

Building our HTML and CSS

Before we can start developing it’s important to get frontend code structure in order. Luckily this process is very simple and shouldn’t take long at all to complete. Below I’ve included a stripped copy of the HTML code from our example “index.html” document. This should all be standard code to display a very basic input form, nothing further than any basic HTML developer’s knowledge.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-style Input Field</title>
</head>

<body>

<div id="c">
	<form id="basicform" action="#" method="post">
	<input type="text" name="username" id="unameblock" title="Enter your username" class="u1" />
    <input type="password" name="password" id="pwblock" title="Enter your password" class="u1" />
    <br /></br />

	<input type="submit" id="submitbtn" value="Submit Button!" />
    </form>
</div>

</body>
</html>

Here I’ve set up 2 very important input elements under the IDs “unameblock” and “pwblock”. These stand for username block and password block, respectively, and will be very important later in our script. Now that our code is looking good it would be wise to jump into CSS styles.

HTML5 Code - Web Designer Mag UK

These are the real bare-bones structure rules since CSS is what gives all HTML elements their form. There aren’t many changes we will be including. Some basic resets for global variables along with alignment and positioning for input fields. Below are clips from the source code, explained in bit intervals.

* { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; padding-top: 150px; background: #dbe9f7; }

#c { width: 850px; margin: 0 auto; }

Here we have our global reset with the asterisk (*) selector removing all browser-standard margins and padding. We also give some styles to the body element for positioning our form front and center. The #c division is our container div which has been centered for the sake of our demo.

input.u1 {
	padding: 6px 12px;
	font-size: 1.6em;
	color: #787878;
	letter-spacing: -0.02em;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#ffffff));
	background: -moz-linear-gradient(top,  #e0e0e0,  #ffffff);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #717171;
	margin-right: 20px;
	-webkit-box-shadow: 1px 1px 0px #efefef;
	-moz-box-shadow: 1px 1px 0px #efefef;
	box-shadow:  1px 1px 0px #efefef;
}
input#submitbtn { font-size: 1.3em; padding: 4px 9px; font-family: Arial, Helvetica, sans-serif; letter-spacing: -0.05em; color: #444; }
input.fail { -webkit-box-shadow: 0px 0px 5px #ff4848; -moz-box-shadow: 0px 0px 5px #ff4848; box-shadow: 0px 0px 5px #ff4848; }
input:focus { -webkit-box-shadow: 0px 0px 5px #007eff; -moz-box-shadow: 0px 0px 5px #007eff; box-shadow: 0px 0px 5px #007eff; }

The first noticeable block is used to style our input fields. It targets all input elements with a class of “u1” which both our username and password fields run. Instead of placing 10-20 style declarations on a single line it’s much easier for editing to keep this in block-level.

In here we have the styles to configure how our input fields will look. Padding, font-size, among many borders and text manipulation properties as well. We’re using many new CSS3 techniques here which should be apparent to all CSS developers.

New CSS3 Entities

Two brand new CSS3 functions we’re using are -webkit-gradient and -moz-linear-gradient which can generate gradients on-the-fly. This is an amazing feature which hasn’t been discussed in many CSS3 articles. This removes the need for any images in creating standards-compliant background gradients.

Mac OS X Home Working Office

We also have -webkit-box-shadow and -moz-box-shadow. Similar naming schemes help with confusing between Webkit browsers and Mozilla-based Gecko browsers.

Further down we have 3 more styles which attack our submit button along with states for our input forms. The :focus pseudo-targeting means CSS will only apply our styles when the user is focused on either input field. These styles will display a blue glow for focus and red glow for errors (very useful when debugging user logins and registration forms).

So far this all looks great! In fact all we need to do is include a few scripts/styles in our header section to really get started on our dynamic effects. If you take the current document and include our stylesheet we can get the hover effects immediately.

Working with jQuery Effects

jQuery is an amazing JavaScript library which has proven useful time and again. Your average web developer is heavily focused on speed and precision of scripting. This is something jQuery takes in and internalizes with their ideas.

Below is a small section which needs to be added between the head tags of your document. I’ll explain a few of these below and also get into some of the behind-the-scenes code.

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/tip-yellowsimple.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.poshytip.js"></script>

Our style.css is the file which includes all of our CSS rules listed above. Another inclusion is tip-yellowsimple.css which hasn’t been mentioned yet. It’s a script written through jQuery as a plug-in for tooltip hovers. With this stylesheet (download with demo source) we are able to style tooltips on any action.

Our two JavaScript files are really basic and self-explanatory. We’re accessing jQuery 1.4.1 min so as to cut down on processing and download speeds. We’re also reading through Google’s APIs code database which stores all previous and active versions of popular scripts. This is a tremendous effort and helps development projects surge forward without the need to constantly download the jQuery library manually.

JavaScript PoshyTips with jQuery

The second file we have “jquery.poshytip.js” contains our plug-in code. Poshytip is a jQuery class written by Vasil Dinkov to support dynamic tooltips. The code is vast and unnecessary to learn in-detail. However if you’re a jQuery geek feel free to check out his manual efforts to see how these methods are called and what variables you could edit.

Basic Action Call

All we need now is our infamous call to action! This is our main function which will load on document load and prepare to launch upon whatever signal we call. In this case we’re looking for an event which happens when a user focuses on one of the input fields.

One last step is to add this code into the head beneath all our file includes. This is straight JavaScript code so it should be encapsulated with a script tag. For easing I’ve removed the tags in the code below so we can focus on just the js functionality.

$(function(){
	$('#unameblock').poshytip({
		className: 'tip-yellowsimple',
		showOn: 'focus',
		alignTo: 'target',
		alignX: 'inner-left',
		alignY: 'top',
		offsetX: 10
	});
	
	$('#pwblock').poshytip({
		className: 'tip-yellowsimple',
		showOn: 'focus',
		alignTo: 'target',
		alignX: 'inner-left',
		alignY: 'top',
		offsetX: 10
	});
});

So what we’re doing is calling a generic function() {} to check on some events. We are creating 2 new instances of the poshytip() method based off our input forms. This can be seen when we parse the DOM for the element IDs “unameblock” and “pwblock”.

Each of the individual settings in place expands on the functionality of poshytip. If you’d like to view documentation for all methods there is a great collection which Vasil has put online. Namely showOn is our most important variable which tells the parsing engine to check for any focus activity in these two elements.

AlignX and AlignY are important in regards to placement. These hold the values for where our tooltip will show up in page. This can be bottom, center, top, along with offset placements such as inner-left and inner-right. Try messing with these if you’d rather have the tooltips pop up on the side or bottom instead of the top.

What you may not have noticed by now is where our text is loaded from. Poshytips makes it simple here, too, where the value of our title attribute is displayed in tooltip text. This makes targeting specific elements extremely simple and very productive!

Conclusion

These are some of the most basic steps towards building an Apple-style input field. There are many other unique effects which can be applied using jQuery that range out of the scope on this tutorial. Check out some demos from Apple’s website for more inspiration. Also if you’d like to download the entire demo package you can do so here.