input fields with CSS tricks

admin — Thu, 10 Dec 2009 14:13:01 +0000

Enhance your input fields with simple CSS tricks

We’re all trying to build an effective and good looking web forms. But there are always a new challenges. If you read my previous articles on how to build a better web forms, you could have noticed there are so many details. Label positioning, context highlighting or justifying elements. But, with just a few simple CSS tricks you can make a usual, boring web forms more effective and exciting.

At least what you can do is to add borders and padding to your input fields. Two examples above shows how you can sat the border color to match your color schema. It is also a good practice to add some padding to input fields. That will make forms more clear. In this example I set the 4px padding to inputs and textarea.

#inputArea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
background-color: #d6e5f4;
padding: 10px;
}

#inputArea input[type="text"], #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
border: solid 1px #85b1de;
width: 300px;
}

Let me review the code above shortly. This is the code for the second example, the blue one. The entire form has a light blue background #d6ee5f4 and 10px padding. Each input element is displayed as a block, which ensures that labels are positioned above input fields.

Now, this was very simple. But you can do more. You can…

Add some background…

You can also add some solid background like in the example below

#inputArea input[type="text"], #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
border: solid 1px #85b1de;
width: 300px;
background-color: #EDF2F7;
}

The trick is simple and is contained in last three lines of the code. You add gradient image as background, set it to be repeated horizontally (repeat-x), and position it to the top of the field. Simple, eh?

But you can do even more! You can…

Add some behavior
But very simple. Make the active input field different. Like in the example below.

#inputArea input[type="text"]:focus, #inputArea textarea:focus
{
background-image: none;
background-color: #ffffff;
border: solid 1px #33677F;
}

As you can see, the code is very simple. Each time a field get the focus a different styles will be applied. It changes the background and the border. But wait! This doesn’t work in Internet Explorer !! So we have to call JavaScript (or jQuery) for help. Ok, you now know that I lied. You can’t do this only with CSS. But, hey, it’s not my false, talk to IE guys

Ok, to do this, we have to change our CSS slightly.

inputArea input, #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
width: 300px;
}

We will define all styles for all inputs and texareas except for background and border

$(document).ready(function(){
$(”input, textarea”).addClass(”idle”);
$(”input, textarea”).focus(function(){
$(this).addClass(”activeField”).removeClass(”idle”);
}).blur(function(){
$(this).removeClass(”activeField”).addClass(”idle”);
});
});

It is now working in IE. Of course, it is working in Firefox as well. This code does three things: initially, it adds “idle” class to all of the inputs and defined behavior for focus and blur events. Maybe not perfect, but it’s working.

So, what else you can do?

Experiment

Yeas, that’s right, experiment with different colors, border sizes and backgrounds. You can for example also add hover functionality. Try, and get rid of boring forms!

Tutorials

admin — Thu, 10 Dec 2009 13:52:14 +0000

coming soon

Print Design

admin — Wed, 09 Dec 2009 06:13:12 +0000

coming soon…..

Logo Design

admin — Wed, 09 Dec 2009 06:10:40 +0000

coming sooon….

Website Design

admin — Wed, 09 Dec 2009 06:00:41 +0000

Website Design

My Websites

These are all my websites.

Graphics Pakistan

http://www.graphicspk.com

All about Graphics pk

Created by Portfolio by Shakeel Akbar

coming soon……

Shakeel Akbar Personal website