How to change Text Selection Color?

[VaniV]

Hi there, 

Can anyone help me in changing the Text Selection color for my website www.vanivrtti.com globally.

Reference:

The current color is Blue, can it be changed to #d8b758

Thanks.

[VaniV · Accepted solution]

Got the code.

::selection {

background:#d8b758;
}

[Shay]

Hi Vani!

Great question, and this is one I have seen asked around the community forums a few times as well. I believe I found the answer and hopefully it works on your store theme also! 

**Important** I am not a trained theme developer and changes like the one I am suggesting are not directly supported by Shopify Support. Before attempting changes like this we strongly suggest that you duplicate your theme file and only attempt if you are comfortable doing so. If you are not, then we recommend hiring a developer to assist you instead.

With that out of the way, I believe you should be able to make this change by adding the CSS snippet I've included below to the bottom of your theme.css file, or your custom CSS asset file if you are using one. You can find this file in your theme code editor in your admin by going to Online Store > Themes > Actions > Edit Code > Open Assets Folder > Click on Theme.css/scss. Once you have the asset opened, scroll to the bottom of the list, start a new line and copy and paste the snippet below into the theme.css file:

::-moz-selection {
background-color: #FA0000;
color: #fff;
}

::selection {
background-color: #FA0000;
color: #fff;
}

This will make your text selection color red. To change it, change the “FA0000” color code to the one you want. Once the code is placed, you can highlight some text to see it. Make sure the text selection color is visible with all of the background colors on your website.

I tested this in my Debut theme file and it worked right away. I'd love to know if it works for you in your current theme file. Please reply back here and let us know once you've applied the change. 

-Shay

[VaniV]

Thank you for the input. @Shay