styling `::selection` #9

New issue

Open

opened 2025-07-23 21:05:47 +02:00 by aylamz · 0 comments

aylamz commented

2025-07-23 21:05:47 +02:00

Collaborator

so the Accessibility section on MDN says:

Don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs.

i did not find any easy built-in way to do this in Librewolf/Firefox so i have no idea what they mean here. of course this can be customized by users with something like Stylus which is still possible even for sites that do override the style of ::selection

For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

this would only be a problem if selected text was indicated using text shadow or underline or something. changing the background color is used universally to indicate selected text, i don't think it really matters what color that is as long as it's different from the background color of the site and has good contrast with the text color. (and also, native apps can have different colors for selected text and i've not heard of that being a problem)

so i think it's fine to change this if you want to :3

actually, i think sites in general should change this because otherwise there's a risk of the color used to select stuff being too similar to the background color of the site, making it hard to see the selection. (this is an issue that i ran into myself recently; firefox mobile uses my phone's accent color which is rather dark and it blended in with the background of a website too much, so it was hard for me to see what text i had selected)

(also, i looked for sources other than MDN that advise against changing the style of ::selection but i didn't find anything)

so the [Accessibility section on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#accessibility) says: > Don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. i did not find any easy built-in way to do this in Librewolf/Firefox so i have no idea what they mean here. of course this can be customized by users with something like Stylus which is still possible even for sites that do override the style of `::selection` > For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality. this would only be a problem if selected text was indicated using text shadow or underline or something. changing the background color is used universally to indicate selected text, i don't think it really matters what color that is as long as it's different from the background color of the site and has good contrast with the text color. (and also, native apps can have different colors for selected text and i've not heard of that being a problem) so i think it's fine to change this if you want to :3 actually, i think sites in general ***should*** change this because otherwise there's a risk of the color used to select stuff being too similar to the background color of the site, making it hard to see the selection. (this is an issue that i ran into myself recently; firefox mobile uses my phone's accent color which is rather dark and it blended in with the background of a website too much, so it was hard for me to see what text i had selected) (also, i looked for sources other than MDN that advise against changing the style of `::selection` but i didn't find anything)

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: qhri/personal-website#9

No description provided.

Rows
Columns

styling ::selection #9

styling `::selection` #9