To disable clicking inside div with CSS, we set the pointer-events style to none.
For instance, we write
div#foo {
pointer-events: none;
}
to set the pointer-events CSS property to none for the div with ID foo. to disable clicking on the div with ID foo.
Sometimes, we want to add wait cursor over entire HTML page with CSS.
in this article, we’ll look at how to add wait cursor over entire HTML page with CSS.
To add wait cursor over entire HTML page with CSS, we can set the cursor style.
For instance, we write
* {
cursor: inherit;
}
body {
cursor: wait;
}
to set the body element’s cursor to wait with cursor: wait to make the page show the wait cursor.
And we have
* {
cursor: inherit;
}
so that all child elements inherits the same cursor style as body.
To add wait cursor over entire HTML page with CSS, we can set the cursor style.
Sometimes, we want to disable text select with CSS.
In this article, we’ll look at how to disable text select with CSS.
To disable text select with CSS, we set the user-select style to none.
For instance, we write
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
to set the user-select style to none for the most common browsers on the body element to disable selection on the text on the page.
To disable text select with CSS, we set the user-select style to none.
Sometimes, we want to disable scrolling when touch moving certain element with CSS.
In this article, we’ll look at how to disable scrolling when touch moving certain element with CSS.
To disable scrolling when touch moving certain element with CSS, we set the element’s touch-action CSS style to none.
For instance, we write
touch-action: none;
to disable touch on the element when moving certain element when we add this style to our CSS.
To disable scrolling when touch moving certain element with CSS, we set the element’s touch-action CSS style to none.
Sometimes, we want to set the placeholder for contenteditable div with JavaScript.
In this article, we’ll look at how to set the placeholder for contenteditable div with JavaScript.
To set the placeholder for contenteditable div with JavaScript, we can set the content CSS style.
For instance, we write
[contenteditable="true"]:empty:not(:focus):before {
content: attr(data-ph);
color: grey;
font-style: italic;
}
to add a placeholder into the contenteditable div with content: attr(data-ph).
This means we use the value of the data-ph as the placeholder content.
We use the [contenteditable="true"]:empty:not(:focus):before pseudo-element to select the contenteditable element and place the content as the first child of it.
This will make the content text show at the start of the element.
To set the placeholder for contenteditable div with JavaScript, we can set the content CSS style.