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:

Share:

Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...

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
White Arrow icon

Floating Labels Interaction

Cloneable
Code
CSS

A short CSS code for floating labels on a form

Read more
White Arrow icon