Cara menggunakan disable click css

Question

To disable a link using CSS, pointer-events property can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether element show to pointer events and whether not show on the pointer.

Table of Contents Show

Using user-select:none
In Google Chrome
In mozilla firefox
In IOS Safari
In Internet Explorer/Edge using
What does user-select property will do?
user-select property values
user-select none
user-select text
user-select all
user-select auto
user-select contain
user-select CSS example

Below example illustrate the approach:

Example 1: Below code shows the use of property-events where ‘a’ tag is disabled, with no cursor (disabled cursor pointer on ‘a’ tag)

<!DOCTYPE html>

<html>

<head>

<<0<1<0>

<<6 <7<8<9>

html1html2

html3html4

html3html6

html1html8

>0<6>

>0head>

<>8>

< 2>

html1< 6 <6<8 9<0 6>

html1<<5<6<5>

html1<head1head2head1head4

head5<head7 head8<8>0

>1>2<8>4>5head7>

html1< 0>

html1<head1 9head1<1

head5<head7 head8<8

>1<8>

html3<01head7>

>0 2>

>0>8>

>0html>

Output: We can notice that although it looks like a link, nothing happens when we take pointer on it or click on it.

Example 2: This code shows CSS which applies to an ‘a’ tag so that it looks like, that the link is disabled, to do so, color and text-decoration property can be used.

We can use user-select property in CSS to disable text selection highlighting in HTML pages.It is not a standard feature, but available in all modern browsers except IE 9 & before.

Using user-select:none

To disable the text selection in HTML we need to give user-select property value as none. Go through the below example to understand if further.

<div>
You can select this text.
</div>
<div class="disable-select">
You cannot select this text,text selection is disabled
</div>

I have added disable-select class to the second div now we will add user-select css property

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

But we have to add browser specific prefix before the user-select option for safari,firefox and internet explorer or edge.

Chrome and opera supports non prefixed versions.

In Google Chrome

To disable text selection highlighting in Google Chrome browser using CSS just set -user-select CSS property to none.

And no prefix is required for Google Chrome and Opera Browsers.

 .disable-select{
  user-select:none;
}

In mozilla firefox

To disable text selection highlighting in mozilla firefox browser using CSS just set -moz-user-select CSS property to none.

And we need add -moz prefix before user-select property for mozilla firefox Browser.

 .disable-select{
   -moz-user-select:none;
}

In Safari

To disable text selection highlighting in Safari browser using CSS just set -webkit-user-select CSS property to none.

And we need add -webkit prefix before user-select property for Safari Browser.

 .disable-select{
  -webkit-user-select:none;
}

In IOS Safari

To disable text selection highlighting in IOS Safari browser using CSS just set -webkit-touch-callout CSS property to none.

 .disable-select{
  -webkit-touch-callout:none;
}

In Internet Explorer/Edge using

To disable text selection highlighting in Internet Explorer/Edge browser using CSS just set -ms-user-select CSS property to none.

And we need add -ms prefix before user-select property for Safari Browser.

 .disable-select{
   -ms-user-select:none;
}

What does user-select property will do?

user-select css property controls whether a text in a HTML element can be selected or not. It is not a standard feature.

You can find more details about draft specification .

user-select property values

user-select valuedescriptionnoneuser cannot select the texttextuser can select the textalluser can select the text with one clickautouser-select value depend upon its parent user-select optioncontainselection will be bound to particular elementelementIE version of user-select contain.

user-select none

As explained above, when we give user-select property value as none to an HTML element we cannot select the text inside the element including it’s children element.

<div style="user-select:none;border:1px solid">
text selection is disabled 
<div>Text selection is disabled in children element also</div>
</div>

user-select text

When you give user-select property as text, user can select the text.

<div style="user-select: none; border: 1px solid;">
text selection is disabled
<div style="user-select: text;">You can select me</div>
<div> text selection is disabled</div>
</div>

user-select all

When we give user-select property as all. Text inside the element is automatically selected on context click.

<div style="user-select:all">
On click we can select the text
</div>

user-select auto

user-select auto behavior depends upon its parent element’s computed value of user-select

If the parent element’s computed value is none then it’s value is none. or if the computed value is all then it’s value is all. or if the value is text it’s value is text
Otherwise the default behavior is text. that is user can select the text.
On pseudo elements ::before and ::after the behavior is none
And if the element is an editable element i.e., text or textarea the computed value is contain or element (In IE)

user-select contain

user-select contain is not supported in other browsers except internet explorer. In IE we have to give user-select option as element instead of contain.

So what exactly this user-select contain will do?

When you give user-select as contain or element selection will be bound to that element and cannot be extended.

Go through the below demo to understand it further.

user-select CSS example

We will see all user-select options in one place.

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

0

And the corresponding CSS values are

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

1

As explained above user-select : contain option is only supported in IE, if you open the fiddle in IE, You can observe its behaviour the element selection cannot be extended beyond the element with class .text-selection-contain.

kode css