Handleiding HTML - Voorbeelden outline eigenschap

CSS		voorbeelden eigenschap	*outline*

Handleiding HTML Legenda | Beschrijving | Gebruikersinterface | CSS eigenschappen | Begin

De outline eigenschap kun je gebruiken om in één keer vast te leggen met welke breedte, stijl en kleur de browser een outline moet weergeven.

In het volgende voorbeeld moet de browser een outline plaatsen om de tekstvelden op het moment dat deze de focus krijgen.

<FORM ACTION="bestemming" METHOD="get"> <P><INPUT TYPE="text" SIZE="30" VALUE="klik hier"></P> <P><INPUT TYPE="text" SIZE="30" VALUE="klik hier"></P> </FORM>

In een stijlblok in de head van het document is een stijlregel opgenomen voor het INPUT element, waarbij gebruik gemaakt is van de pseudo-class selector focus.

INPUT:focus { outline: 3px solid #FF0000; }

Als je in een tekstveld klikt, krijgt het de focus en wordt de outline weergegeven (uiteraard alleen als de browser én outlines én de pseudo-class selector focus ondersteunt). Klik je vervolgens op het andere tekstveld, dan krijgt dat de focus en daarmee de outline.

De outline wordt juist buiten de gewone rand van het element geplaatst. Om dat goed zichtbaar te maken is voor het eerder gebruikte voorbeeld met behulp van een CLASS-selector vastgelegd dat de tekstvelden een blauwe rand moeten hebben.

<FORM ACTION="bestemming" METHOD="get"> <P><INPUT TYPE="text" SIZE="30" VALUE="klik hier" CLASS="rand"></P> <P><INPUT TYPE="text" SIZE="30" VALUE="klik hier" CLASS="rand"></P> </FORM>

In het stijlblok zijn nu de volgende stijlregels opgenomen:

.rand { border: 3px solid #0000FF; } INPUT:focus { outline: 3px solid #FF0000; }

Een outline neemt geen eigen ruimte in en beïnvloedt de positie en afmetingen van de box van het element en andere elementen niet. Het weergeven of laten verdwijnen van de outline heeft daardoor niet tot gevolg, dat de opmaak van het document opnieuw bepaald moet worden. Je moet er wel rekening mee houden, dat de outline (zeker als deze breed is) naastgelegen elementen kan overlappen. In het algemeen zal dat geen probleem zijn, omdat de outline slechts een beperkte tijd zichtbaar is. In het volgende voorbeeld wordt een en ander gedemonstreerd met een overdreven brede outline, die wordt weergegeven als de muisaanwijzer zich boven een hyperlink bevindt.

<P><A HREF="#klik">Schuif de muisaanwijzer boven de link</A> en de outline verschijnt. Als je de muisaanwijzer van de link afschuift, dan verdwijnt de outline weer.</P>

In een stijlblok is een stijlregel opgenomen voor het A element, waarbij gebruik gemaakt is van de pseudo-class selector hover.

A:hover { outline: 10px solid #FF0000; }

Legenda | Beschrijving | Gebruikersinterface | CSS eigenschappen | Begin