May 6, 2024
White Arrow icon
Back to all Elements

Live CSS Edit

An editable box of text that affects the website's CSS

There are 2 things needed to be done for this to work.

The first one is to add a single line of script to the page, turning the 'designMode' on:

<script>
 document.designMode = "on"
</script>

Copy

The second one is to configure the display property of the <style> tag as 'block':

<style style="display:block">

 body {
   background: white;
   font-size: 16px;
   color: #333;
 }

</style>

Copy

Preview:

browser mockup
Share:
Heart icon

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
Blue arrow iconWhite Arrow icon

Floating Labels Interaction

Cloneable
Code
CSS

A short CSS code for floating labels on a form

Read more
Blue arrow iconWhite Arrow icon