This article is brought to you by Easy Framework
This is a little trick that you can apply to your forms to enhance user experience. We'll display editable form data (indented to be edited, updated) as regular tabular data intended for reading.
We're using pure CSS for this one... Actually we WOULD use pure CSS if it wasn't for IE7's lack of support for :focus pseudo-class. :(
Overview
This trick can be useful when you have, let's say, a profile page where your users can view and edit the data on the same page.
When users first open the page they see values for various options. You need to make sure that the data as readable as possible so we want to avoid the usual form elements styling. You'll agree that reading content inside input fields is somewhat difficult.
This is what you'd want them to have:
By adding a small icon, it becomes obvious that the data is editable.
When user clicks on the form element, the usual styling is applied.
The Markup
We're using regular form markup, nothing extra special there. I am using the class name editable for the form element.
<form id="" action="/" method="post" class="editable"> <fieldset> <legend>Personal Information</legend><div> <label for="name">Full Name</label> <input name="name" id="name" size="30" class="field" type="text" value="Alen Grakalic" /> </div> <div> <label for="email">Email</label> <input name="email" id="email" size="30" class="field" type="text" value="youremail@email.com" /> </div> <div> <label for="web">Website</label> <input name="web" id="web" size="30" class="field" type="text" value="http://cssglobe.com" /> </div> <div> <label for="twitter">Twitter URL</label> <input name="twitter" id="twitter" size="30" class="field" type="text" value="http://twitter.com/cssglobe" /> </div> </fieldset> <div class="submit"><button type="submit">Edit</button></div> </form>
The Styling
We need to style two states for the form fields. Regular, non-acitve state and the state when form element is clicked on (focus state). First we'll actually define how input field looks like when focused. The reason we're styling this first is because this look will guide us to style element's regular appearance.
.editable .field:focus{
border:2px solid #dfdfdf;
padding:5px;
background:#fff url(bg_input.gif) repeat-x;
width:300px;
line-height:1em;
margin:0;
outline:none;
}
What we do next is style element's on focus appearance. We're removing background colors and borders (increasing the width if needed) and adding a small background icon so it's obvious that the element is editable. You noticed that for "on focus" style I put 2px wide border and set padding to 5px. When user focuses on the form element we don't want any vertical shifting so we need to make sure that the height of both states of the element is the same. So, for default style we are setting vertical padding to 7px and removing the border all together.
.editable .field{
border:none;
background:transparent url(ico_edit.gif) no-repeat 0 50%;
padding:7px 0 7px 20px;
width:300px;
line-height:1em;
margin:0;
font-weight:bold;
}
Damn IE
IE7 and IE6 don't suppot :focus pseudo-class. You'll agree that users with those browsers should really update their software or make a switch to something better.
Just in case you are into providing everyone with same user experience (as you should really) here's a jQuery code that'll help.
$(document).ready(function(){
$('.editable .field').focus(function() {
$(this).addClass('focused');
}).blur(function(){
$(this).removeClass('focused');
});
});
In addition to that you need to add one more selector to "focused" definition - .editable .focused:
.editable .field:focus, .editable .focused{
border:2px solid #dfdfdf;
padding:5px;
background:#fff url(bg_input.gif) repeat-x;
width:300px;
line-height:1em;
margin:0;
outline:none;
}
Hidayat Sagita 21 Dec, 2009
I love it :D
vic 21 Dec, 2009
Adam 21 Dec, 2009
shawnna 21 Dec, 2009
I totally love it. Am inspired, i go to try these for my works.
W/ lots of love and Kiss.
Shawnna
edu 22 Dec, 2009
Perhaps it could be improved by marking somehow the fields in which the user has edited the content in any way.
pace!
Mark Shingleton 23 Dec, 2009
Martin LeBlanc 23 Dec, 2009
Chad Tomkiss 23 Dec, 2009
Great post.
I would add cursor: pointer to .editable .field just to make it a bit more obvious that its clickable :)
Kind regards,
Chad
Miguel625 23 Dec, 2009
Personally it would be cooler to have just one pencil, on maybe the fieldset background that when clicked activates the boxes on all fields within the set. Really cool looking.
Maverick 23 Dec, 2009
well done.
cssglobe 23 Dec, 2009
I believe that edit icon makes things obvious. Many applications have only icons to communicate with users.
Kai Chan Vong 23 Dec, 2009
I was reading an article about using HTML5 and using javaScript was one solution: document.createElement('myelement'); and thought to myself this could be done also... and so far have found this: http://www.xs4all.nl/~peterned/csshover.html
Sadly not a one liner and relient on clientside scripting being enabled, but an alternative none the less to use jS to improve IE.
PSDgator 23 Dec, 2009
Enrique Ramírez Vélez 24 Dec, 2009
paul 28 Dec, 2009
tansuk 31 Dec, 2009
Rifki Jones 31 Dec, 2009
Rifki
Ravindra 6 Jan, 2010
TK Pandey 7 Jan, 2010