Select all text on click using CSS

When a user has to select some text on a website, they have to drag and hold their mouse, or use double-click it. Sometimes, there are some samples that we know that the user is going to copy for sure. A use case for this can be code samples. The user-select CSS property can help do exactly just that.

.select-all-text {
    user-select: all;
    -moz-user-select: all;
    -webkit-user-select: all;
}
- Advertisement -

And if you were to click the above, it would select the full text on click.

You can also provide a none value to the user-select property to disable selection completely:

user-select: none;

Recent Articles

How to check if a string contains emojis in JavaScript?

If you have user-generated content in your web application, chances are you have to deal with strings containing emojis. Since emojis are...

Writing conditionals in CSS: when/else

CSS already has had conditionals in the form of @media queries or @support queries to selectively apply styling to the document. But...

Retrieving content value of ::after or ::before in JavaScript

For the following element:#element::after { content: 'Custom value' }If we needed a way of...

How to permanently remove a file from Git history

We all make mistakes sometimes. Pushing files that contain some secrets or sensitive information to a Git repository is fairly common. And...

Select all text on click using CSS

When a user has to select some text on a website, they have to drag and hold their mouse, or use double-click...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.