Skip to content

Instantly share code, notes, and snippets.

@greggnakamura

greggnakamura/contenteditable-example.html

Created September 17, 2016 05:26
Show Gist options
  • Save greggnakamura/8c68c06c3496bf1884cd7f41751a6fb8 to your computer and use it in GitHub Desktop.
Save greggnakamura/8c68c06c3496bf1884cd7f41751a6fb8 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: Content Editable CSS example
Raw
contenteditable-example.html
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
head, style { display: block; }
[contenteditable] { -webkit-user-modify: read-write-plaintext-only; }
style:first-of-type { display: none; }
style:last-of-type { padding: 1em; font-size: 1.5em; white-space: pre; margin: 0 auto; width: 80%; font-family: monospace; }
</style>
<!-- live editable css -->
<style contenteditable="true">
body { padding: 1em; border: 1px solid red; }
ul { color: red; }
</style>
</head>
<body>
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment