<p>Dê o foco a cada um dos textos a seguir clicando sobre os textos ou clicando em qualquer lugar e acionando a tecla Tab. <br>Alguns navegadores, por padrão, colocam uma borda em elementos que tem o foco.</p> <h3 tabindex="1">Título com fundo cinza</h3> <p tabindex="2">Parágrafo com outline</p> <ul> <li tabindex="3">Item 1 - cor verde</li> <li tabindex="4">Item 2 - aumenta tamanho de fonte</li> <li tabindex="5">Item 3 - sublinhado</li> </ul> <input type="text">
h3:focus { background: #ccc; } p:focus { outline: 2px dotted blue; } li:nth-child(1):focus { color: green; } li:nth-child(2):focus { font-size: 150%; } li:nth-child(3):focus { text-decoration: underline; } input:focus { background: yellow; border: 1px solid black; }