: tarkennus - CSS-temppuja

Anonim

:focusPseudo luokka CSS käytetään muotoilu elementti, joka on tällä hetkellä kohdistettu näppäimistön tai aktivoituu hiiren. Tässä on esimerkki:

textarea:focus ( background: pink; )

Kaikki elementit (yleisimmin s ja s) ovat ”tarkennuksessa”, kun ne on valittu ja valmiita kirjoittamaan tekstiä (kuten silloin, kun kohdistin vilkkuu). Hiiren käyttäjät voivat napsauttaa heitä (tai niihin liittyviä label) kohdistaakseen, ja näppäimistön käyttäjät voivat lisätä sarkainta niihin.

"Välilehdet"

:focusnäennäisluokan muu käyttö on "tabbing" elementtien läpi. Monilla selaimilla on oletusarvoinen kohdennustila välilehden valintaa varten, joka on katkoviiva. Se on melko helppo poistaa, mutta muista korvata se sopivalla vaihtoehdolla, jos teet niin.

s, s, s, ja textareas kaikilla on :focus tilaa oletuksena, mutta voit antaa keskittyä tilassa mihin tahansa elementtiin HTML. Sekä contenteditable ja tabindex attribuutteja työtä tämän, kuten tässä esimerkissä:

Liittyvät

Artikkeli 12. toukokuuta 2017

Pseudoluokka `: tarkennus sisällä '

Chris Coyier

Selaimen tuki

Kaikki selaimet tukevat :focus.