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

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

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