MoreLesson 253Free preview

Contenteditable Border

This lesson is part of How To · All levels

Summary

Contenteditable attributes make HTML elements easily editable by users. To make the edit area clear, give the border, padding, and focus style using:focus. You can also display a placeholder with a pseudo-element:empty::before when the element is still empty.

Key points

Contenteditable" makes the content of the element editable and its value passed on to the child.
:focus or :focus-within helps to mark the area being edited.
:empty::before can be a placeholder, but spaces or <br> make the element not considered empty.
Sanitize content before it is stored or displayed to other users.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.