FROM CACHE - en_header

How to change Text Selection Color?

Solved
VaniV
Explorer
56 3 11

Hi there, 

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

Reference:

Screenshot 2021-05-17 at 7.47.32 PM.png

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

Thanks.

Accepted Solution (1)

Accepted Solutions
VaniV
Explorer
56 3 11

This is an accepted solution.

Got the code.

 

::selection {

background:#d8b758;
}

View solution in original post

Replies 3 (3)
VaniV
Explorer
56 3 11

This is an accepted solution.

Got the code.

 

::selection {

background:#d8b758;
}

Shay
Shopify Staff
Shopify Staff
1498 236 317

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

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

VaniV
Explorer
56 3 11

Thank you for the input. @Shay