CSS style label WYSIWYG

Style is also a label (supported in non-ie kernel browsers), directly

 

When we set the style to contenteditable, the content can be edited. After careful experience, if we change the background to red.

As long as the writing is complete, it will be presented immediately. Wow, this is very convenient for us to write that kind of dynamic editor effect in the future. If you have time, I will try again. Attached to my researchCode:

1 <! Doctype html >
2 < Html >
3 < Head >
4 < Meta HTTP-equiv = "Content-Type" Content = "Text/html; charset = gb2312"   />
5 < Title > </ Title >
6 < Style Type = "Text/CSS" >
7 Body style {
8 Display : Block ;
9 Background : #333 ;
10 Color : White ;
11 Font : 13px/1.8 Monaco, mono-space ;
12 Padding : 20px ;
13 White-space : Pre ;
14 Margin : 0 auto ;
15 Width : 500px ;
16 Height : 100px ;
17 }
18 </ Style >
19 </ Head >
20 < Body >
21 < Style Contenteditable > Body { Background : Green ; } </ Style >
22 </ Body >

23 </Html> 

reference Article : http://css-tricks.com/show-and-edit-style-element/