In CSS we can use the user-select
property to decide how the user can select the text.
By default, a user has to drag and hold the cursor to select the wateded text. But thanks to the user-select
prop we can select a full text with just one click:
.select-all-text {
user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
}
And you can apply the .select-all-text
class the whatever element is needed. A paragrpah, a div and so on.
But you can also have a no-select option if you don't want to allow any selection, or copy paste at all.
.no-select-allowed {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
Below is a full Codepen example with these options in action.
See the Pen
CSS User Select by JS Craft (@js-craft)
on CodePen.
PS: if you want to reved to the default way of selecting the text you can say:
.default-select {
user-select: auto;
-moz-user-select: auto;
-webkit-user-select: auto;
}
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.