Fokus-pseudoluokka

Pseudoluokka focus asettaa tyylit input-elementille, textarea-elementille tai linkille, jolla on syötteen fokus. Syötteen fokus tarkoittaa sitä, että olemme klikanneet input-elementtiä ja siellä vilkkuu sauva-kursori (tekstiä voidaan kirjoittaa).

Syntaksi

cssinput:focus {
  
}

Esimerkki

Fokuksen saamisen jälkeen input-elementti saa punaisen reunan ja varjon:

html<input>

cssinput:focus {
  border: 1px solid red;
  box-shadow: 0 0 3px red;
}

Результат:

Katso myös