Klikni enkrat in izberi vse, klikni ponovno in izberi po svoje

CSS nas velikokrat preseneti, kako lahko s popolnoma enostavnimi triki dosežemo presenetljive rezultate. Eden takšnih je tudi efekt, klikni enkrat in izberi vse, klikni ponovno in izberi po svoje.

Efekt deluje precej preprosto, ko uporabnik klikne na vsebino se izbere celotno vsebina v elementu, npr. DIV polju. Če kliknemo ponovno pa se lahko vsebina izbira poljubno, kot smo tega navajeni. Trik tiči v tem, da imamo na izbranem elementu (:focus) vklopljen časovni zamik z animacijo @keyframes, kjer se status “user-select: all” sprememni v “user-select: text”. Izbrani element mora imeti se tabindex=”0″.

Primer v akciji:

Vir in dodatne informacije o uporabi: Using CSS to Control Text Selection

Oznake: CSSfocususer-select

Komentiraj


*