HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

How To Disable Text Selection With CSS User Select

in CSS, Web Development
Reading Time: 2min read
425 4
0
css user select
590
SHARES
2.7k
VIEWS
Share on FacebookShare on Twitter

By default, texts on any web page can be highlighted and copied. Disable the highlight function also disables someone to copy the texts in the document. Using CSS user select makes the texts unselectable.

If for some reasons, you do not want your texts inside the button or paragraph to highlighted. CSS user select style attribute might help you.

RelatedPosts

How To Remove or Reset All WordPress Site Content Back to the Default Installation Settings

How to Create CSS Blurred and Opacity(Transparent) Background[CODE]

How To Align the Content of a Div to the Bottom with CSS[CODE]

So how to disable text selection with CSS user select?

Learn how by watching this video or continue reading.

See more amazing CSS videos in youtube: Garnatti one

Target an element and add the following styles

-webkit-touch-callout: none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

It is self-explanatory, add these styles disable the text selection.
Try to select the sentence demo below. This sentence was added with the CSS user select styles.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Notice that you cannot highlight the sentence above means the styles that added worked.

The-webkit-touch-callout attribute targets the ios safari browser, -webkit-user-select targets Chrome, Opera and Safari browsers, -khtml-user-select targets Konqueror, -moz-user-select targets Mozilla firefox and -ms-user-select:none targets internet explorer.

You can use this technique if you want to…

Prevent people from copying your content. Unfortunately, it can be useless if people inspect your code from the browser. They can just copy the content within the source code.

Do not want somebody to copy your contents? The better way is to disable the right-click mouse function.

Tags: Content CopyingCross-browserCSSTutorialUser-Select
Share236Tweet148Share59

Related Posts

How To Remove or Reset All WordPress Site Content Back to Default Installation
Wordpress

How To Remove or Reset All WordPress Site Content Back to the Default Installation Settings

by 22bulbjungle
April 16, 2021
0

In this tutorial, we are going to remove all the WordPress site content database. Like posts, pages, or plugin settings. Making it...

Read more
How to Create CSS Blurred and Opacity(Transparent) Background

How to Create CSS Blurred and Opacity(Transparent) Background[CODE]

April 12, 2021
How to align content of a div to the bottom

How To Align the Content of a Div to the Bottom with CSS[CODE]

April 12, 2021
How To Setup StackPath CDN With Your WordPress Website

How To Setup StackPath CDN With Your WordPress Website

March 24, 2021
How To Remove or Reset All WordPress Site Content Back to Default Installation

How To Remove or Reset All WordPress Site Content Back to the Default Installation Settings

April 16, 2021
How to Create CSS Blurred and Opacity(Transparent) Background

How to Create CSS Blurred and Opacity(Transparent) Background[CODE]

April 12, 2021
How to align content of a div to the bottom

How To Align the Content of a Div to the Bottom with CSS[CODE]

April 12, 2021
How To Setup StackPath CDN With Your WordPress Website

How To Setup StackPath CDN With Your WordPress Website

March 24, 2021
How to Add Custom CSS and JavaScript File in Shopify

How to Add Custom CSS and JavaScript in Shopify (EASY)

March 24, 2021
How To Add Checkout Autofill or Autocomplete Address on the Address Field in WooCommerce

How To Add Checkout Autofill/Autocomplete Address on the Address Field in WooCommerce

March 24, 2021

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Recent News

How To Remove or Reset All WordPress Site Content Back to Default Installation

How To Remove or Reset All WordPress Site Content Back to the Default Installation Settings

April 16, 2021
How to Create CSS Blurred and Opacity(Transparent) Background

How to Create CSS Blurred and Opacity(Transparent) Background[CODE]

April 12, 2021

Categories

  • CSS
  • Ecommerce
  • Graphic Design
  • Javascript
  • PC Tips
  • Photoshop
  • Responsive design
  • Shopify
  • Video
  • Web Development
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2021 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2021 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.