CSS :: Псевдоэлемент ::selection

Псевдоэлемент ::selection (от англ. selection – выделение) позволяет задать стилевое оформление выделенного пользователем текста. Например, p::selection {блок объявлений}.

В правилах стилей разрешается использовать только следующие свойства: background, background-color, color, cursor, outline и text-shadow.

Селекторы псевдоэлементов выбирают элементы требуемого типа, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями «::».

Синтаксис

<селектор>::selection {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-pseudo-4/#selectordef-selection

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/::selection

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
							
		/* Выделенный текст подсветим желтым фоном */
		::selection{
		background-color: yellow;
		}
		
		/* Выделенный в поле текст оформим красным цветом */
		textarea::selection{
		background-color: transparent;
		color: red;
		}
		
	</style>
	
</head>
<body>

	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<label for="first_name">Введите сообщение:</label><br><br>
		<textarea name="message"></textarea><br><br>
		
		<button type="reset">Сброс</button> &nbsp; 
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
	<p>Выделенный текст абзаца подсвечивается желтым фоном.</p>
	
</body>
</html>

Пример №1