This CSS property is thoroughly explained here, with working examples:
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
.svg){kind=logo}
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.
Attachments Open full size