Как отключить подсветку выделяемого текста в CSS/HTML?
В случаях, когда нужно отключить выделение текста в браузерах, можно воспользоваться специальными CSS-свойствами. Для начала посмотрим на стандартное поведение (для теста я создал test.html с определенным контентом):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<h1>Привет <%= @user.name %>!</h1>
</body>
</html>Если открыть файл в браузере и попробовать выделить текст, мы получим стандартное поведение:
Чтобы отключить выделение и подсветку выделяемого текста воспользуемся следующим CSS-сниппетом, который включает в себя свойства подходящие для реализации данного функционала для большинства браузеров:
-webkit-touch-callout: none; /* Мобильный iOS Safari */ -webkit-user-select: none; /* Desktop Safari */ -khtml-user-select: none; /* Konqueror HTML (KDE Browser) */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer and Edge */ user-select: none; /* Chrome, Opera and Firefox */
Чтобы применить все эти свойства к определенному элементу, обернем их в класс, а класс добавим в нужное место:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<h1 class="no-select">Привет <%= @user.name %>!</h1>
<style media="screen">
.no-select {
-webkit-touch-callout: none; /* Мобильный iOS Safari */
-webkit-user-select: none; /* Desktop Safari */
-khtml-user-select: none; /* Konqueror HTML (KDE Browser) */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer and Edge */
user-select: none; /* Chrome, Opera and Firefox */
}
</style>
</body>
</html>Теперь текст (заголовок h1) не будет выделяться и подсвечиваться в большинстве современных браузеров. Стоит отметить, что это не только визуальное изменение, но и функциональное - текст не будет выделяться.
Для проверки можно добавить другой элемент с текстом и воспользоваться CTRL + A для выделения текста всей страницы и попробуем скопировать контент в буфера обмена при помощи CTRL + C.
При последующей вставке контента (CTRL + V) из буфера обмена, мы увидим, что в буфер попал текст без класса ".no-select".