Voor wie het nog niet is opgevallen: probeer eens iets op deze website te selecteren. Waarschijnlijk wordt je selectie dan niet de standaard blauwe kleur, maar juist groen!

CSS 3
Met de komst van CSS 3 is het mogelijk om de standaard blauwe selectiekleur op je website aan te passen. Dit kan met behulp van de ::selection selector. Op het moment van schrijven wordt het door de meeste nieuwe browsers ondersteund, maar het kan dus zijn dat je de groene selectiekleur niet ziet. Voor meer informatie over de ondersteunde browsers, kan je terecht op de W3schools website.

Voorbeelden
Voor wie het leuk lijkt, is hier de CSS code om de selectiekleur op je gehele website naar groen aan te passen (de kleur kan je natuurlijk naar eigen wensen aanpassen):

/**
* Highlight color
*/
/*** Algemene Browsers ***/
::selection {
  background-color: #BEFF9F;
}

/*** Mozilla browsers (Firefox) ***/
::-moz-selection {
  background-color: #BEFF9F;
}

/*** Webkit browsers (Safari) ***/
::-webkit-selection {
  background-color: #BEFF9F;
}

/***Andere browsers (Opera) ***/
::-o-selection {
  background-color: #BEFF9F;
}

Hoewel het in de meeste moderne browsers volstaat om alleen ::selection te definiëren, zijn er ook een aantal browser specifieke codes die je kunt gebruiken. In het voorbeeld vind je dus ook een aantal andere regels die voor bepaalde soorten browsers werken.

In het eerste voorbeeld wordt alleen de achtergrond kleur van de selectie aangepast, maar er zijn meer dingen die je in kunt stellen. Zo is het bijvoorbeeld ook mogelijk om de tekstkleur in de selectie aan te passen. In het volgende voorbeeld wordt niet alleen de achtergrondkleur naar rood gezet, maar wordt ook de tekst wit (deze keer wordt alleen de code voor de algemene browsers gegeven, want de aanpassing is voor de overige browsers hetzelfde):

/*** Algemene Browsers ***/
::selection {
  background-color: #BEFF9F;
  color: #FFFFFF;
}

De eerder gegeven voorbeelden gelden voor de volledige website, maar je kunt er ook voor kiezen om het aan een bepaalde CSS klasse te koppelen en het alleen in bepaalde paragrafen te gebruiken. Zo zou je de standaard selectiekleur kunnen houden op je website, behalve in bepaalde stukken tekst. De volgende code maakt de selectiekleur geel in alle paragrafen (<p>) die gebruik maken van de klasse “yellow” (<p class=”yellow”>):

p.yellow::selection {
  background-color:  #FFF2A8;
}

p.yellow::-moz-selection {
  background-color:  #FFF2A8;
}

p.yellow::-webkit-selection {
  background-color: #FFF2A8;
}

p.yellow::-o-selection {
  background-color: #FFF2A8;
}

Let er hierbij op dat het niet mogelijk is om CSS te combineren ook al doen ze steeds hetzelfde. Het is dus niet mogelijk om bijvoorbeeld

p.yellow::selection,
  p.yellow::-moz-selection {
  background-color:  #FFF2A8;
}

te gebruiken, je moet de selectors steeds apart in je CSS bestand definiëren. Dit komt doordat browsers het hele selector stuk negeren als er een onderdeel in zit wat ze niet begrijpen.

Michel Kraaijeveld

Michel Kraaijeveld is oprichter van WPsitemaken. Hij is ervan overtuigd dat het voor iedereen mogelijk moet zijn om een eigen website te maken, zonder lastige handleidingen door te hoeven nemen. Zelf is hij al 6 jaar actief met WordPress en probeert zijn kennis op een simpele manier over te brengen aan anderen.