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;
}
Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of
Hidayat Sagita on 21 Dec, 2009 wrote:
I love it :D
vic on 21 Dec, 2009 wrote:
Adam on 21 Dec, 2009 wrote:
shawnna on 21 Dec, 2009 wrote:
I totally love it. Am inspired, i go to try these for my works.
W/ lots of love and Kiss.
Shawnna
edu on 22 Dec, 2009 wrote:
Perhaps it could be improved by marking somehow the fields in which the user has edited the content in any way.
pace!
Mark Shingleton on 23 Dec, 2009 wrote:
Martin LeBlanc on 23 Dec, 2009 wrote:
Chad Tomkiss on 23 Dec, 2009 wrote:
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 on 23 Dec, 2009 wrote:
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 on 23 Dec, 2009 wrote:
well done.
cssglobe on 23 Dec, 2009 wrote:
I believe that edit icon makes things obvious. Many applications have only icons to communicate with users.
Kai Chan Vong on 23 Dec, 2009 wrote:
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 on 23 Dec, 2009 wrote:
Enrique Ramírez Vélez on 24 Dec, 2009 wrote:
paul on 28 Dec, 2009 wrote:
tansuk on 31 Dec, 2009 wrote:
Rifki Jones on 31 Dec, 2009 wrote:
Rifki
Ravindra on 6 Jan, 2010 wrote:
TK Pandey on 7 Jan, 2010 wrote: