css for inline editing

Question

I am trying to make a form that has inline editing (using jEditable) and I am struggling with the CSS. I want it to look moderately usable, and there seem to be two areas that I am trying to clean up:

1. How do you style the span/text that is "editable" so that it would be obvious to a user that it really is editable?

2. How do you make the transition from span/text to input element in a reasonable way (what css styles would you use)?

Thanks

Answer 1

I thought this might be a pure css issue but I see you're using jeditable. If I can address it from the css standpoint this is what I would do.

To show the area as editable give it a dotted line and when hovering, change the border from dotted to inset, shading the background slightly gray.

// normal state
.editable{
  border:2px dotted #CCC;
}

// hovered state
.editable:hover{
  border:2px inset #f5f5f5;
}

When clicked, change the border to solid darker color and make the background yellow.

// while editing
textarea{
    border:1px solid #333;
    background:#FFFFEB;
 }

Here's an example, I hope this at least helps from the styling standpoint. Purely my opinion.

(edit: btw, I had to hack up span to change into a textarea when clicked (on the demo), don't judge my jquery!)

Answer 2

DOM manipulation for editable fields is a bad style. You force browser to recalculate all the page.

There is a standard way to point browser to change behaviour of editable field when user interact with that field. It's the outline CSS property. Outline does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

So why much better to use CSS only to show user editable fields?

1. Users has already got accustomed how fields looks. They will have serious difficulties in their struggle with a strange form's behaviour.
2. There are standard html elements to text editing. Why do you need to invent something new? Is it so important?
3. Modern browsers can change field's appearance on one's own. Also they can use system elements, colors etc.

So, if you try to show to user that field is editable, just make it standard.

Anyway you can add your own additional rules to change field's appearance to correspond to site design. For example, I've used outline property with :hover and :focus pseudostates and change default background.

And dublicate (CSS only):

.editor
{
    width: 80%;
    height: 100px;
}
.editor:hover
{
    outline: 1px solid #ffd700; 
}
.editor:focus
{
    outline: 1px solid #ffffe0; 
    background: #ffffe0;
}