W3docs
es
Iniciar sesión

Pseudoelemento CSS ::selection

Usa el pseudoelemento CSS ::selection para seleccionar y estilizar una parte del documento. Lee sobre el pseudoelemento y prueba ejemplos.

El pseudoelemento ::selection apunta a la parte de un documento que el usuario ha resaltado — por ejemplo, haciendo clic y arrastrando el ratón sobre el texto, o pulsando Ctrl/Cmd + A. Permite anular el aspecto predeterminado de resaltado del navegador para que el texto seleccionado coincida con tu marca o mejore el contraste.

Por defecto, el navegador dibuja el texto seleccionado con el color de resaltado del sistema operativo (normalmente un fondo azul con texto blanco). Estilizar ::selection reemplaza ese valor predeterminado para los elementos que se indiquen.

Este capítulo cubre la sintaxis, qué propiedades están permitidas, particularidades de los prefijos de navegador, y ejemplos prácticos para texto, múltiples colores y campos de formulario.

Por qué y cuándo usarlo

Un estilo de selección personalizado es un pequeño detalle que hace que un sitio se sienta pulido:

  • Consistencia de marca — haz que el resaltado coincida con tu color de acento en lugar del azul del sistema operativo.
  • Legibilidad — en un fondo oscuro o de bajo contraste, el resaltado predeterminado puede dificultar la lectura del texto; puedes elegir una combinación con contraste garantizado.
  • Alcance — aplica diferentes colores de resaltado a distintas secciones (por ejemplo, bloques de código frente a texto de cuerpo).

Mantén el texto seleccionado legible: establece siempre tanto color como background-color juntos para no terminar con, por ejemplo, texto blanco sobre un resaltado casi blanco.

Qué propiedades están permitidas

::selection ignora la mayor parte de CSS. Solo un conjunto pequeño y fijo de propiedades de CSS puede usarse para estilizarlo:

Propiedades como font-size, font-family, margin o transform no tienen efecto sobre el texto seleccionado — la selección es solo un resaltado en tiempo de pintura, no un cuadro real que puedas mover o redimensionar.

Información

Firefox históricamente usó una forma con prefijo de proveedor, ::-moz-selection. Para admitir versiones más antiguas de Firefox, declara la regla con prefijo antes de la regla estándar ::selection, como hacen los ejemplos a continuación.

Este pseudoelemento fue introducido en CSS Selectors Level 3, luego eliminado, y ahora vive en la especificación CSS Pseudo-Elements Level 4.

Estándar y versión

CSS Pseudo-Elements Level 4

Sintaxis

Pseudoelemento CSS ::selection

::selection {
  css declarations;
}

Ejemplo del pseudoelemento ::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>
Pruébalo tú mismo »

Ejemplo del pseudoelemento ::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>
Pruébalo tú mismo »

Ejemplo del pseudoelemento ::selection con las etiquetas <textarea> e <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>
Pruébalo tú mismo »

Aspectos a tener en cuenta

  • No hereda como las propiedades normales. Una regla ::selection se aplica al elemento que apunta; no es un valor que se propaga en cascada a los hijos seleccionados como lo hace color. Para estilizar la selección en todo el sitio, escribe una regla en un selector amplio como ::selection (coincide con todo) o body ::selection.
  • El fondo debe ser suficientemente opaco para ser visible. Un background-color con alfa muy bajo puede ser difícil de ver sobre el fondo existente.
  • Limitado a su lista de propiedades. Si una declaración parece no hacer nada, comprueba la lista permitida anterior — probablemente está siendo ignorada.

Para profundizar en las propiedades individuales que puedes usar aquí, consulta color, background-color y text-shadow.

Práctica

Práctica
¿Qué puedes lograr usando el pseudoelemento ::selection en CSS?
¿Qué puedes lograr usando el pseudoelemento ::selection en CSS?
Was this page helpful?