Focus

Syntax

Class
Properties
{...}focus:{...}
{...}:focus{...}
<div class="t1 flex"> <button class="t1 px-16 py-4 m-4 color-white rounded-3 shadow-4 cursor-pointer select-none bg-c-blue focus:outline-none focus:shadow-outline-blue-800 ">Button 1</button> <button class="t1 px-16 py-4 m-4 color-white rounded-3 shadow-4 cursor-pointer select-none bg-c-blue focus:outline-none focus:shadow-outline-blue-800 ">Button 2</button> <button class="t1 px-16 py-4 m-4 color-white rounded-3 shadow-4 cursor-pointer select-none bg-c-blue focus:outline-none focus:shadow-outline-blue-800 ">Button 3</button> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Set the border-width to 3px while the element is focused.
t1 focus:b-3
.t1.focus\:b-3:focus { border-width: 3px; }