contenteditable (attribute)

The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

The attribute must take one of the following values:

  • true or an empty string, which indicates that the element is editable.
  • false, which indicates that the element is not editable.

If the attribute is given without a value, like <label contenteditable>Example Label</label>, its value is treated as an empty string.

If this attribute is missing or its value is invalid, its value is inherited from its parent element: so the element is editable if its parent is editable.

Note that although its allowed values include true and false, this attribute is an enumerated one and not a Boolean one.

You can set the color used to draw the text insertion caret with the CSS caret-color property.


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
contenteditable Yes 12 3 5.5 9 Yes
contenteditable="caret" Yes ≤79 No No Yes No
contenteditable="events" Yes ≤79 No No Yes No
contenteditable="plaintext-only" Yes ≤79 No No Yes Yes
contenteditable="typing" Yes ≤79 No No Yes No
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
contenteditable Yes Yes 4 Yes Yes Yes
contenteditable="caret" Yes Yes No Yes No Yes
contenteditable="events" Yes Yes No Yes No Yes
contenteditable="plaintext-only" Yes Yes No Yes Yes Yes
contenteditable="typing" Yes Yes No Yes No Yes

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.