Making elements editable is one of the more fun abilities available on HTML elements. Giving users an area outside the normal forms sections is also great, within reason of course. However, indicating that these areas are different and have that ability is important as well. So what’s the fastest way you may ask? Well, CSS does have a pseudoclass to target elements that are readable and writeable. Let’s take a look!
:read-write {
border: 1px solid #ccc;
}Now any editable element will have a light grey border. Obviously, I hope your design will be a bit better than this concept I provided, but for the most part, you should get the idea of how simple and powerful this selector is.