The contenteditable tag attribute specifies whether the content of an element is editable or not.
The contenteditable attribute is new in HTML5 and when the contenteditable attribute is not set on an element, the element will inherit it from its parent.
The basic example is this (let you change the text):
1 2 3 4 5 6 | <!DOCTYPE html> <html> <body> <p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p> </body> </html> |
Now you can use style to make it more wonderful. See my example from codepen.io account :
Just create one html5 file and add this source of code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <style contenteditable> style { background-color: white; border-radius:3px; box-shadow: 0 5px 15px rgba(0,0,0,0.20), 0 5px 15px rgba(0,0,0,0.30); color:#333; display: block; font-size: 20px; line-height 28px; margin: auto; overflow:auto; padding: 18px; max-width: 800px; white-space: pre; } style:before { content:"Edit the style!"; border-bottom:2px solid grey; display:block; font-size:36px; font-weight:bold; margin-bottom:18px; padding-bottom:18px; } style:focus { outline:none; } body { background:grey; margin: 0; padding: 10px; } *, *:before { box-sizing:border-box; transition:all .2s ease-out; } </style> |