Selected change to text back ground color of your url webpage site

By -

The fallback default setting for text back ground and text color is set by the browser, which is  white/ blue commonly.  You can now adjust the color of desired text color and background with use of CSS3. Which makes your website more colorful with selected text never looking boring again.
All major browsers support the option ,  Google Chrome, Mozilla, Opera, IE 9+ and Safari included. These particular type of  browser contribute to majority of  market share of the browser market , don’t worry about making changes to make your site. Site browsers will enjoy the changes.
Changing your website if you wish, then just add the following code snippet to your website’s style sheet.

Change text Selected background – whole website

::selection
{
background-color:#00ff00; /* Code for Green Color*/
color:#ffffff; /* Code for white color*/
}
/* 2nd Snippet for Firefox */
::-moz-selection
{
background-color:#00ff00;
color:#ffffff;
}
We’ve added ::-moz-selection because Firefox supports this extension. It will apply to whole of your website.
selected-text-color
If you want to make changes to just some paragraphs or some text as shown in the image above, see how it can be done below :
<p class=”paragraphRed”>This is the first paragraph. You will see this text in white color and red color when selected. </p>
<p class=”paragraphGreen”>This is the Second paragraph. You will see this text in white color and green color when selected. </p>
<p class=”paragraphYellow”>This is the first paragraph. You will see this text in white color and yellow color when selected. </p>
Background color and text color both have been modified. CSS for above text will be, “color” used for text color and “background” for background of selected text :
p.paragraphRed::selection
{
background:red;
color:white;
}
p.paragraphRed::-moz-selection
{
background:red;
color:white;
}
p.paragraphGreen::selection
{
background:green;
color:black;
}
p.paragraphGreen::-moz-selection
{
background:green;
color:black;
}
p.paragraphYellow::selection
{
background:yellow;
color:red;
}
p.paragraphYellow::-moz-selection
{
background:yellow;
color:red;
}

 

Apply now these changes to your websites and beautify your sites. You can get every CSS Color from here.

 

 

You must log in to post a comment.

brian

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>