::selection {
background-color: #FFA;
color: #000;
}This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 2* | 9 | 12 | 3.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 135 | 137 | 4.4 | No |
I think these snippets are a great idea, but they need better descriptions, what does the script do, provide a working example of it above the code..
This entire website, at the time of this writing anyway, is an example of the above.
“provide a working example of it above the code..” is it not enough that he provides all these snippets? LoL, just kidding, I love the work that you do Chris, but I do agree with andrew. It would be helpful to see working examples, but I don’t think we can ask more of you. Love the site, keep it up.
Select any text on this site. Notice the selection colour is not blue. :P
Cool tip, but is there any way to get this effect to work on the focus highlight of a select or input element?
If Chris were to be any more thorough it would be condescending, I appreciate not being treated like an asshole. Cheers!
is there any way which will work in internet explorer also???
Should be able to use
/* Mozilla based browsers */
::-moz-selection {
background-color: #FF68B0;
color: #000;
}
/* Works in Safari */
::selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Opera */
::-o-selection {
background-color: #FF68B0;
color: #FFF;
}
::-ms-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Internet Explorer */
::-webkit-selection {
background-color: #FF68B0;
color: #FFF;
}
Hi Chris, your a jedi!!!!!!!!!!
all the links on this page are snazzy!!!! I’m using the alpha theme and for the life of me can’t change the look of links!!!!! please please i’m begging you show me how to have links like yours please please i’ve tried putting all sorts of css into the custom css area nothing happens to my links…..
I’m thinking there’s something more to just adding the correct code into css area? i’ve tried everything my links still have a line and horrible background colour when hovered….frustrating OMG….is it the alpha theme in RW 4.4.2 maybe?
Hey there…
I was just wondering that this is CSS3 and we know that CSS3 doesnt work in the current versions of IE… is there any alternate in CSS that we can create so that our website looks same in IE as well?
Of course another solution would be to use bg’s but appart from that???
e.g. try this website in IE6.
You know what i mean?
Have a look to
http://css3pie.com.. This will make some of the css3 features work in IE.. I succeeded just partially to make it work ob my site..Also
http://modernizr.comoffers some other useful features and fallback support for old browsers.Hope it helps
Please check http://dowebsitesneedtolookexactlythesameineverybrowser.com/
That’s great! :-D
How can you change the selection color for an image?
What about in ie?
How can i change selection background color in ie.
Hi Chris,
I’m interested as to why you’ve not included a ::selection colour in v.9 when it was used in v.8. Have your thoughts on its use changed?
Great Trick.. Really useful…. tanx :)
Thanks!
It seems like that is the same color as my default browser so I felt like a fool for not seeing a change, but when I pasted it into a CSS file and played with the colors, it worked perfectly.
Great css Tricks but the live example is missing, provide a working example of the code..
I think it would work fine, you need to put the text in a div right? Thanks for the post!
Could you please show us, how text change after some time(1 minutes etc), if we have 5 text paragraph we want to display these one by one
please help me to do so
Yes I also facing same problems
Also for webkit…
This is one of the best sites in the world to learn everything css.
Thanks for this code Chris.
Thank you! It works perfectly!
i was expecting this for long. but not for changing the selection color. i have a crazy idea with it. i dont like to copy my article of my site. so i have put the background color white and text color black and make cursor as default. so when visitors going to select the text they cant see what he selected. they might think that may be it is uncopyable. they will fall in a illusion. i am so happy.
thanks for this simple but helpful css.
My name is rusafy
@Daniel15: The selection of this site is like the ones on other sites at least in my experience. rgb(51, 153, 255)…blue!
@css-tricks.com: Really nice site, awesome tricks! give me more!
There is one bug though.If you select some text on a page with styled selection then switch to another tab(page) and then get back to the first one the selection is no longer styled.
Unfortunately, not working on my blog :(
::-moz-selection { background-color: #000; color: #03A8E6; } /* Works in Safari */ ::selection { background-color: #000; color: #03A8E6; } ::-webkit-selection { background-color: #FFA; color: #000; }
::selection {
background-color: #FFA;
color: #000;
}
its also use firefox
This really adds a nice touch to a project i’m finishing up. Thank you for this!
Thanks for the code. I was wondering how to change the default text selection color of my genesis theme. Luckily this tutorial caught my attention and i simply copied the code and put into CSS, Just changed the color code according to color scheme of my theme.
::selection {
background-color: #gray;
color: #ffffff;
}
hey, is it possible to write ::selection in one place (i.e. body or html tag ) and add that specification to whole site? or its necessary to list all elements on site and to each element add ::selection? well it would be easier to add it in one place instead of listing all . what you thnk?
how does it work with a font change
hi need help can i change select option and select label text color….
What about mobile browsers
Pretty solid, but lacking in iOS Safari and Opera Mini. Dropped a support table into the post so you can check it out.