Add Designer support for CSS user-select to disable text selection or enable one-click all-text selection

This CSS property is thoroughly explained here, with working examples:

user-select - CSS: Cascading Style Sheets | MDN

This CSS property is incredibly versatile and even beginners will benefit on day one of using Webflow:

  • Clicking some buttons in Webflow (i.e,. p in a div, used as a button) quickly will cause Webflow to highlight the text. This looks very amateurish on a professional website. See attached image (or click here).

  • To prevent easy copy-pasting of text (say of sensitive or gated content), this CSS property is usually a strong enough line of defense.

  • By enabling the user-select: all choice, you can now single click to highlight an entire line. This is very useful for users selecting text to copy, like addresses or phone numbers or URLs.

  • Tiada Guru
  • Jun 2 2020
  • Koen Ahn commented
    27 Oct, 2020 09:48pm

    I'd love to be able to set the user-select property natively in Webflow. I have this hero heading text with individually animated words. Because of the way Webflow works, I cannot wrap this animation in <H1> tags, so I had to create two versions of the heading: one for screen readers that other users cannot see, and one that contains the animation, that has aria-hidden:true as a custom attribute. So far, so good, right? But when I select the text on the page and paste it into a text editor, the heading shows up twice, because both headings have user-select set to default. I want to disable user-select on the hidden heading.