Editing css on the fly using contenteditable html attribute

Editing css on the fly using contenteditable html attribute

2 min. read

HTML markup

<style contenteditable="true">
#div
{
	background-color:#cc5200;
}
</style>

Use of contenteditable attribute

Contenteditable attribute is used to edit the content of an HTML element. All you need is to specify contenteditable="true" on the opening tag of the element, then you can edit the content of the element.

CSS rules

#div
{
	width:100%;
	height:80px;
	background-color:#000;
}

style
{
	display:block;
	font-size:15px;
	padding:10px;
	white-space:pre;
}

By default the style element will be invisible because of display : none css property applied by the browser( the default styling ), so in order to make "style" element visible it's display property is set to block. And white-space : pre is used to display the content inside the style element the way it is being typed.

See result in the fiddle below

Write comments