Eén van de leuke details die je kan toevoegen aan een website is de kleur dat wordt weergegeven als iemand tekst selecteert. In plaats van steeds het standaard blauw kleurtje te gebruiken, kan je dit ook instellen om het bijvoorbeeld te doen matchen aan je layout, of gewoon om het in het oog te laten springen.
In sommige gevallen kan dit ook de leesbaarheid van moeilijke teksten verbeteren waardoor deze kleine aanpassing een verbetering is in de gebruikservaring die een bezoeker heeft op je website.
Hoe kleuren veranderen van geselecteerde tekst?
In WordPress is het eenvoudig om dit aan te passen: Navigeer naar de locatie waar je theme staat, zoek naar style.css en open het bestand. Vervolgens moet je er volgende code aan toevoegen:
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
::selection {
background-color: #ff6200;
color: #fff;
}In het veldje ‘background-color’ zet je dan de kleur dat moet worden weergegeven bij selectie, en het veldje ‘color’ dient om de kleur van de tekst weer te geven.
Deze selector ” ::selection ” wordt herkend door: Chrome, Safari, IE9+ en Opera. Firefox gebruikt daarvoor zijn eigen kleuren, waardoor we ook de ” ::-moz-selection ” moeten gebruiken. Vandaar het tweede lijntje.
En meer dan dat is het niet!
Meerdere kleurselecties?
Dat is ook mogelijk, dan kan je bijvoorbeeld volgende code gebruiken:
p.rood::selection {
background: #ffb7b7;
}
p.rood::-moz-selection {
background: #ffb7b7;
}
p.geel::selection {
background: #fff2a8;
}
p.geel::-moz-selection {
background: #fff2a8;
}
Als je dit gebruikt, dan moet je er wel op letten tijdens het schrijven van een bericht, dat je dit opneemt in je styling, het zal er dan als volgt moeten uitzien als je een bericht schrijft:
<p class="geel"> Dit zal een gele achtergrond weergeven bij selectie</p>
<p class="rood"> Dit zal een rode achtergrond weergeven bij selectie</p>