Contornos dinámicos: 'outline'

En esta página tenemos un formulario (FORM) con tres áreas para entrada de texto (INPUT) y dos botones (BUTTON). Más abajo, una imagen que contiene un mapa de imagenes (MAP) que define dos zonas activas(AREA). Por último tenemos un par de enlaces (A).

A todos estos elementos le vamos a aplicar la siguiente regla de estilo:

FORM, INPUT, BUTTON, MAP, AREA, A { outline: red solid 2px }

Al recibir el foco, cada uno de estos elementos deben ser rodeados por un contorno de color rojo con una línea llena de 2px de grosor. Para rotar el foco entre los distintos elementos se puede utilizar la tecla de tabulación (TAB).


 Nombre:        
 Apellido:      
 Edad:      años

Mitad superiorMitad inferior