Home > Article > Web Front-end > How to disable table selection highlighting in css3
How to disable table selection highlighting in css3
- WBOYOriginal
- 2022-06-14 15:47:281876browse
In CSS3, you can use the "user-select" attribute to prohibit table selection highlighting. This attribute is used to specify whether the text of an element can be selected. It can prevent the text from being selected or highlighted when the text is double-clicked. behavior, just set the value of this attribute to none, the syntax is "element {user-select: none;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to set highlight disabling in css3 table
The user-select attribute specifies whether the text of the element can be selected.
In a web browser, if you double-click on text, the text will be selected or highlighted. This property is used to prevent this behavior.
The syntax is as follows:
user-select: auto|none|text|all;
auto default. Text can be selected if the browser allows it.
none prevents text selection.
text Text can be selected by the user.
all Click to select text instead of double-clicking.
Examples are as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.tb1{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
</style>
</head>
<body>
<p>禁止选择高亮：</p>
<table border="1" class="tb1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<p>未禁止选择高亮：</p>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>Output results:
(Learning video sharing: css video tutorial,html video tutorial)
The above is the detailed content of How to disable table selection highlighting in css3. For more information, please follow other related articles on the PHP Chinese website!