Elemento pseudo ::selection de CSS
El pseudo-elemento ::selection es una parte resaltada del documento. Se utiliza para aplicar estilos a la parte de un documento que ha sido resaltada por el usuario (como hacer clic y arrastrar el mouse sobre el texto).
El color de fondo predeterminado para la selección de texto es azul, y esta propiedad se utiliza para cambiar dicho color predeterminado.
Solo unas pocas propiedades de CSS se pueden utilizar para dar estilo al pseudo-elemento ::selection:
- color
- background-color
- text-shadow
- cursor
- caret-color
- outline y sus propiedades individuales
- text-decoration y sus propiedades asociadas
- text-emphasis-color
INFO
El prefijo -moz- se utiliza con este selector en la forma ::-moz-selection.
Este pseudo-elemento fue introducido en CSS Selectors Level 3, pero fue eliminado y, actualmente, se encuentra en Pseudo-Elements Level 4.
Versión
Sintaxis
Elemento pseudo ::selection de CSS
::selection {
css declarations;
}Ejemplo del pseudo-elemento ::selection:
Ejemplo de código CSS ::selection
<!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>Ejemplo del pseudo-elemento ::selection con diferentes colores:
Ejemplo del pseudo-elemento ::selection con diferentes colores:
<!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>Ejemplo del pseudo-elemento ::selection con las etiquetas <textarea> y <input>:
CSS ::selection, otro ejemplo de código
<!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>Práctica
¿Qué puedes lograr usando el pseudo-elemento ::selection en CSS?