change text-selection background color

How to change text-selection background color

If you’re wondering after seeing different backgrounds on text-selection then don’t worry. In this article, I will be telling you, How to change text-selection background color on your own website.

How to change text-selection background color

For WordPress website

Source: WordPress.org

If you’re in love with WordPress and use it to build all your site using it. Then follow `the steps below to change text-selection background color :

Step 1: Visit your website

Step 2: Go to Customizer

Step 3 : Got to Additional CSS

Step 4 : Enter the following code and Publish it.

::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}

Note : Change the value of color as per your requirement.

For Blogspot [Blogger] website

change text-selection background color

If you’re a Blogger (formerly Blogspot) by Google user, then follow the steps below to change the text-selection background color :

Step 1: Go to Blogger Dashboard

Step 2: Navigate to Themes from the sidebar

Step 3: Go to Edit theme

Step 4: In template source code find for </head> tag

Step 5: Put the following code just above the </head> tag

<style>
::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
</style>

Note : To find the tag press CTRL + F and enter whatever you want and on a smartphone, you have an option of Find in Page in chrome/firefox.

For HTML/CSS website

change text-selection background color

For simple HTML/CSS website, you need to follow the steps below :

Step 1: Open the HTML file of your website in editor

Step 2: Find </head> tag

Step 3: Just above the </head> tag, enter the code below and save it.

<style>
::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
</style>

Note : Make a duplicate of the HTML file before editing.

If you have any queries or suggestions please use the comments section below. Also, Please share this blog post with all of your friends on social media with your Cody friends.

This resource website is completely ad-free, please donate us to keep is ad-free for a lifetime and support the writers of this blog.

Join me on Telegram and Twitter for daily updates.

Peace!

Read more articles :

Leave a Comment

Your email address will not be published. Required fields are marked *