Skip to content

Instantly share code, notes, and snippets.

@dotproto

dotproto/index.html

Created September 10, 2015 18:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dotproto/2073a04c2becc409f82e to your computer and use it in GitHub Desktop.
Save dotproto/2073a04c2becc409f82e to your computer and use it in GitHub Desktop.
Download ZIP
Content editable example
Raw
index.html
<html>
<head>
<style>
/* We're using floats to prevent spaces from appearing between
* the elements that make up the URL. Alternatives include flex,
* or simply removing the spaces form the HTML. See this link
* for more information:
* https://css-tricks.com/fighting-the-space-between-inline-block-elements/
*/
.url-wrap span {
float: left;
box-sizing: border-box;
}
.url-wrap .editable {
min-height: 1em;
min-width: 1em;
background-color: goldenrod;
padding: 0 .25em;
text-align: center;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="url-wrap">
<span>http://www.foo.bar/hello/</span>
<span id="test" contenteditable="true" tabindex="1" class="editable">fizz/buzz/blam-diggity</span>
<span>?query-param=</span>
<span id="test" contenteditable="true" tabindex="2" class="editable">query-value</span>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment