Select color and text

@webStruck_Jul 31.2007

Hi,

Is there a code on how to change the color of the text and its background when I would select a text on a webpage?

For example if I try to select a text anywhere in this forum (to copy the text, etc.) the color of the text would change to gray and its background would be black. anything to customize this?

to post a comment

HTML

14 Comments(s) _↴

@blis102Jul 31.2007 — #From what I am aware, no. But maybe there is some crazy JS/CSS hackery out there that I havent seen. I believe the browser controls it tho because it has serious implications on the usability of a site (what if you set the text to be white and the background to be white? "Oh S#$% wheres my text??"). I believe it is either an inverse of the color scheme or something similar.

@Major_PayneAug 01.2007 — #If you are wanting to just change your text color and highlight color for a web page, you can customize that from your browser and override what web pages show you. That includes link colors and font style and sizes. Some customizing can be done from the Appearance tab by clicking the Advance button. But if you want to change color on an html page you are making, that is a horse of a different color. LOL

Ron

@blis102Aug 01.2007 — #Seems like webStruck is asking if you select text (as in if you highlight some text and right click (on Windows) and see "Cut", "Copy", "Paste", "View Selection Source", "Properties", etc... can you change the default background color and text color for the highlighted element. I am about 100% sure you can't without some ugly hack of some sort. But who knows, nothing surprises me these days...

I messed around with things but still got a default blue on white and white on blue setting, depending on how dark an element was (dark element = light BG color and dark text and visa versa), in Firefox 2. Let me know if you find something different

@Major_PayneAug 01.2007 — #You can't change it from the Context Menu, but I know you can change the highlighted color and what you want as a background color for the whole page. The text color can also be changed if you are wanting to override that page's default settings as I explained above. You can even make your own style sheet to use with how every web page displays. Just don't know why. The easiest would be just to change the color that is used for highlighting without making major changes to how the web page is displayed. This is a global change and effect everything.

Ron

@webStruck_authorAug 01.2007 — #Seems like webStruck is asking if you select text (as in if you highlight some text and right click (on Windows) and see "Cut", "Copy", "Paste", "View Selection Source", "Properties", etc...[/QUOTE]

Exactly.

Why is it that if I am on a different computer and browses the same site it gives me different highlight color? For example on this forum, when I am on another computer, (the same FF, not sure about the version) it gives me the blue text and black highlight background. But if I am on my workstation, it gives me the gray text and black highlight background.

Any ways to give a constant highlights on different computers/browsers? ?

-----------------------------------------
UPDATE:

I messed around with things but still got a default blue on white and white on blue setting, depending on how dark an element was (dark element = light BG color and dark text and visa versa), in Firefox 2. Let me know if you find something different[/QUOTE]

I found something interesting. When I changed the properties of my computer from winXP style (desktop>right click>properties>appearance) to classic style, and browse this forum to try to highlight the texts, I got the appearance of white text and blue background (which I have black background and gray text on winXP style before).

But then, how am I going to customize it and make it appear the same on all windows desktop environment...?:o

@FerretAug 01.2007 — #This is something that is configured on the computer, not controlled by the page itself.

@webStruck_authorAug 01.2007 — #This is something that is configured on the computer, not controlled by the page itself.[/QUOTE]
I guess not.

[B]Major Payne:[/B]

If you are wanting to just change your text color and highlight color for a web page, you can customize that from your browser and override what web pages show you.

That includes link colors and font style and sizes. Some customizing can be done from the Appearance tab by clicking the Advance button.[/QUOTE]

Quite right. Only it can be controlled through CSS. I've seen a webpage before and it has orange highlight background with white text (I forgot the website so I wasn't able to re-visit it). So my guess now have proven to be right after all (that it can be done through CSS), I've found the solution. Just now:

[CODE]
 ::-moz-selection{
 background: #fbdbe8;
 color: #F55B99;
 } 
 
 ::selection {
 background: #fbdbe8;
 color: #F55B99;
 } 
 [/CODE]

...though its not working in IE. THough rest assured in IE, when the text was highlighted, it can be seen. [U]I've asked this because when I highlight the texts on my web page, it doesn't have the boxed-background color and only the text color would change.[/U]

http://www.w3.org/TR/css3-selectors/#UIfragments

http://www.quirksmode.org/css/selection.html

Thanks for your responses. (and thanks for power keywords for Google) :p

@FerretAug 01.2007 — #Interesting, that's something that's news to me. I've been told time and again that it simply wasn't possible.

That's good to know!

@blis102Aug 01.2007 — #Yeah that is interesting. Too bad it will probably take IE about 20 years to impliment CSS3 selectors...

@Major_PayneAug 01.2007 — #I explained all that in my #5 post about how to customize and the different ways. That included from overriding the way a web page appears to using your own stylesheet. Everything said since has been a repeat of that.

The differences between PCs and what your web page appearance is depends on many factors. If you have your Options set the same for each browser in both PCs, then the only changes will be in what default Appearances you have set for that PC. I explained what to do in post #3 very quickly. You get to the Appearances tab by right-clicking your Desktop. Choose properties. Select Appearance tab. You have some basic changes you can make here. For more, click the Advanced button. Then you can change all kinds of stuff like your HIGHLIGHT COLOR, text sizes, font styles, etc..

Ron

@blis102Aug 01.2007 — #Well in my post #4 I said that webstruck wanted a solution for CSS (which he agreed with), not a system setting and the solution, as he posted, is using the ::-moz-selection and ::selection pseudo classes to handle the change. I believe he was looking for an actual solution to the problem at hand using CSS, not system settings.

@Major_PayneAug 01.2007 — #Yes, but changing system settings is a lot quicker and easier to match more then one PC to each other without having to resort to making a CSS.

Ron

@webStruck_authorAug 02.2007 — #and yes that's a lot quicker, but then I wanted to make it appear constant on all different computers of people browsing my site.

@Major_PayneAug 02.2007 — #According to your OP, I took it you were wanting this for yourself locally on your own PCs. Now that you want it for a web page others will be viewing, the answer to this is no. All the factors you talked about is dependent on every viewer's individual browser and Appearance settings.

Ron

Also in #HTML _↴

Can't stop clicking these buttons by @jonkantner 🤘Why Mozilla in new version this week shows different results?how to get focus directly when i press enter

Success!

Help @webStruck_ spread the word by sharing this article on Twitter...

Tweet This

Select color and text

14 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Select color and text

14 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #HTML _↴