CSS ::selection-Pseudoelement
Das ::selection-Pseudoelement ist ein hervorgehobener Teil des Dokuments. Es wird verwendet, um Stile auf den Teil eines Dokuments anzuwenden, der vom Benutzer hervorgehoben wurde (z. B. durch Klicken und Ziehen der Maus über Text).
Die Standard-Hintergrundfarbe für die Textauswahl ist blau, und diese Eigenschaft dient dazu, die Standardfarbe zu ändern.
Nur wenige CSS-Eigenschaften können verwendet werden, um das ::selection-Pseudoelement zu stylen:
- color
- background-color
- text-shadow
- cursor
- caret-color
- outline und seine Langschreibweisen
- text-decoration und seine zugehörigen Eigenschaften
- text-emphasis-color
INFO
Das -moz--Präfix wird mit diesem Selektor in der Form ::-moz-selection verwendet.
Dieses Pseudoelement wurde in CSS Selectors Level 3 eingeführt, später entfernt und befindet sich derzeit in Pseudo-Elements Level 4.
Version
Syntax
CSS ::selection-Pseudoelement
::selection {
css declarations;
}Beispiel für das ::selection-Pseudoelement:
CSS ::selection-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
::-moz-selection {
color: #eee;
background: #8ebf42;
}
::selection {
color: #eee;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Beispiel für das ::selection-Pseudoelement mit verschiedenen Farben:
Beispiel für das ::selection-Pseudoelement mit verschiedenen Farben:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.green::-moz-selection {
background-color: #8ebf42;
}
.green::selection {
background-color: #8ebf42;
}
.yellow::-moz-selection {
background-color: #FFFF19;
}
.yellow::selection {
background-color: #FFFF19;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>This is a text with the default selection background-color.</p>
<p class="green">Select this text to see a green background.</p>
<p class="yellow">Select this text to see a yellow background.</p>
</body>
</html>Beispiel für das ::selection-Pseudoelement mit den <textarea>- und <input>-Tags:
CSS ::selection, ein weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input::-moz-selection {
color: #1c87c9;
background-color: #eee;
}
input::selection {
color: #1c87c9;
background-color: #eee;
}
textarea::-moz-selection {
color: white;
background-color: #8ebf42;
}
textarea::selection {
color: white;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>Input element</p>
<form>
<input type="text" value="Select this input text" />
<p>Textarea element</p>
<textarea rows="5" cols="25">Select this textarea text</textarea>
</form>
</body>
</html>Praxis
Was können Sie mit dem ::selection-Pseudoelement in CSS erreichen?