Interface de usuario. CSS 3. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

La propiedad cursor

La propiedad cursor permite especificar el icono que se muestra al situar el cursor sobre un elemento.

En la recomendación CSS 2.1, los posibles valores eran auto, crosshair, default, help, move, pointer, progress, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, text y wait.

En la recomendación CSS 3, se han añadido los valores none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, grab, grabbing, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in y zoom-out.

Los ejemplos siguientes muestran todos los valores posibles:

p {
  cursor: auto;
}

p {
  cursor: crosshair;
}

p {
  cursor: default;
}

p {
  cursor: help;
}

p {
  cursor: move;
}

p {
  cursor: pointer;
}

p {
  cursor: progress;
}

p {
  cursor: n-resize;
}

p {
  cursor: ne-resize;
}

p {
  cursor: e-resize;
}

p {
  cursor: se-resize;
}

p {
  cursor: s-resize;
}

p {
  cursor: sw-resize;
}

p {
  cursor: w-resize;
}

p {
  cursor: nw-resize;
}

p {
  cursor: text;
}

p {
  cursor: wait;
}

p {
  cursor: none;
}

p {
  cursor: context-menu;
}

p {
  cursor: cell;
}

p {
  cursor: vertical-text;
}

p {
  cursor: alias;
}

p {
  cursor: copy;
}

p {
  cursor: no-drop;
}

p {
  cursor: not-allowed;
}

p {
  cursor: grab;
}

p {
  cursor: grabbing;
}

p {
  cursor: ew-resize;
}

p {
  cursor: ns-resize;
}

p {
  cursor: nesw-resize;
}

p {
  cursor: nwse-resize;
}

p {
  cursor: col-resize;
}

p {
  cursor: row-resize;
}

p {
  cursor: all-scroll;
}

p {
  cursor: zoom-in;
}

p {
  cursor: zoom-out;
}

También pueden utilizarse cursores personalizados, indicando la dirección de la imagen que se quiera emplear. Se puede escribir una lista de cursores separados por comas para que el navegador utilice el primero disponible

p {
  cursor: url("exclamacion.png"), wait;
}

p {
  cursor: url("exclamacion.cur"), wait;
}

p {
  cursor: url("exclamacion.ico"), wait;
}

Notas:

Firefox y Google Chrome no muestran el icono correspondiente al valor context-menu de la propiedad cursor, como se comenta en la página de diferencias entre navegadores.
Edge solamente admite cursores en formato ICO o CUR (ICO es el formato de los iconos de Windows y CUR es el formato de los cursores no animados de Windows, prácticamente idéntico al formato ICO), como se comenta en la página de diferencias entre navegadores.

Contornos

Un contorno es como un segundo borde, pero que no se tiene en cuenta al calcular el tamaño del elemento y que no tiene por qué ser rectangular.

La propiedad compuesta outline

La propiedad compuesta outline permite establecer un contorno a un elemento, indicando como en caso del borde, el color, el grosor y el estilo del contorno.

p {
  outline: red 3px solid;
}

Un elemento puede tener simultáneamente borde y contorno, como muestra el ejemplo siguiente:

p {
  outline: red 3px solid;
  border: black 3px solid;
}

El contorno se diferencia del borde en que el contorno no se tiene en cuenta al calcular el tamaño del elemento, mientras que el borde sí, como muestran los ejemplos siguientes:

p.con-border {
  border: black 10px solid;
}

p.con-outline {
  outline: black 10px solid;
}

Esta diferencia es más evidente si el contorno se genera cuando el ratón pasa por encima del elemento. En el caso del borde, al añadirse el borde, los elementos siguientes se desplazan, pero en el caso del contorno, al generarse el contorno, los elementos siguientes no se desplazan.

p.con-border:hover {
  border: black 10px solid;
}

p.con-outline:hover {
  outline: black 10px solid;
}

El contorno se diferencia también del borde en que el borde es siempre rectangular, mientras que el contorno no tiene por qué serlo.

span.con-border {
  border: black 3px solid;
}

span.con-outline {
  outline: black 3px solid;
}

Nota: Firefox no muestra el contorno de un elemento en-línea de la misma manera que Chrome o Edge, como se comenta en la página de diferencias entre navegadores.

La propiedad outline admite como color el valor invert. Con este valor, el contorno toma el color opuesto al color de fondo del elemento.

Como se comenta en la página de diferencias entre navegadores, Chrome y Firefox no muestran el valor invert, pero Edge sí que lo hace. Firefox dejó de hacerlo en la versión la versión FF3.0. En la página de bugs de Firefox se explica qué motivos dan los desarrolladores de Firefox para no hacerlo.

body {
  background-color: white;
}

p {
  outline: invert 3px solid;
}

body {
  background-color: black;
  color: white;
}

p {
  outline: invert 3px solid;
}

body {
  background-color: red;
  color: white;
}

p {
  outline: invert 3px solid;
}

Las propiedades outline-color, outline-width y outline-style

Las propiedades outline-color, outline-width y outline-style permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro contornos de un elemento y se utilizan de la misma manera que las propiedades border-color, border-width y border-style.

p {
  outline-color: black;
  outline-style: solid;
  outline-width: 3px;
}

La propiedad outline-color admite el valor invert. Con este valor, el contorno toma el color opuesto al color de fondo del elemento.

body {
  background-color: black;
  color: white;
}

p {
  outline-color: invert;
  outline-style: solid;
  outline-width: 3px;
}

Curiosamente, en este caso Firefox y Chrome sí que muestran el contorno, lo que no hacen con la propiedad compuesta outline.

CSS 3: Interface de usuario

Cambio del modelo de caja: box-sizing

La propiedad cursor

Contornos

La propiedad compuesta outline

Las propiedades outline-color, outline-width y outline-style