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:

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

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