Simple Inline Editing With CSS

Below is an address book containing my two good friends Monkey and Crow. Go ahead and change any of their details. This simple approach to inline editing is quite easy to achieve.

If you want to let people click on a value and edit it, an input fits the bill. The only problem is that it needs to blend in with the page. The inherit CSS value causes an element to use the parent's value. Combining this with a few adjustments to strip borders and padding makes an input look just like the surrounding text.

/* Make an input blend into its parent */
input.inline-edit{
  /* Eliminate borders and padding */
  border: none;
  padding: 0;
  margin: 0;

  /* Inherit the parent element's typography */
  font: inherit;
  color: inherit;
  line-height: inherit;
  font-size: inherit;
  text-align: inherit;

  /* Seems to help alignment in headers */
  vertical-align: top;
}

/* Add interaction cues on hover and focus */
input.inline-edit:hover,
input.inline-edit:focus{
  /* Change the background to a light yellow */
  background-color: #FFD;

  /* A subtle transition never hurts */
  -webkit-transition: background-color 0.5s;
     -moz-transition: background-color 0.5s;
      -ie-transition: background-color 0.5s;
          transition: background-color 0.5s;
}

Now any input with the inline-edit class will behave like editable text. This only deals with appearance, so you will typically still want some JavaScript, or a submit button to post the changes back to your server.

Benefits

Aside from being quite simple to implement, there are two benefits to this approach. First, the inputs are fully keyboard accessible, so you can tab from field to field without any fancy tricks. Second, the elements do not need to be replaced, there is no jitter or DOM reflow when they become active.

Caveats

This technique works for editing headers, tabular data, and form layouts. If the editable value needs to reside within a paragraph of text though, you will need to size it manually. If you want to edit a paragraph of text, a similar approach can be applied to textareas, however they will clip text with too many lines. Both of these issues can be worked around with some clever applications of contenteditable, however that may be a topic for another day.

blog comments powered by Disqus
Monkey Small Crow Small