::selection does not work on text which has ::first-letter. This is code:
p::first-letter {
font-size: 130%;
}
::selection {
background: red;
color: white;
}
<p>hello</p>
Live demo
When you select, it does not apply the color to h
I tried to add !important, but still does not work.
::selection {
background: red !important;
color: white !important;
}
I remember coming across this a long time ago..
It's a known bug in chrome which still seems to be an issue!
https://bugs.chromium.org/p/chromium/issues/detail?id=17528
Related
/* Site */
::-webkit-selection {
background-color: #highlightBackground;
color: #highlightColor;
}
::-moz-selection {
background-color: #highlightBackground;
color: #highlightColor;
}
::selection {
background-color: #highlightBackground;
color: #highlightColor;
}
I am using semantic-ui as css framework, and I have been overriding its values today. I came across with selection option, which is overridden by default, and I would like to set it as computer default. As some of you know, you can change selection color in macbooks, so I would like my users to use computer's default selection color.
So, what should I do? I tried inherit and transparent but they don't work.
The solution is to use the system color highlight for the background and highlighttext for the foreground.
Colors like inherit won't work, because inherit means "use the same color as the parent element". That's not what we want!
The first example sets the selection colors to yellow on brown, to emulate the framework theme. Just to make sure changing those colors works at all.
/* colours from theme */
::-webkit-selection {
background-color: brown; color: yellow;
}
::-moz-selection {
background-color: brown; color: yellow;
}
::selection {
background-color: brown; color: yellow;
}
<div>This is a div in which you can make a selection</div>
Then we'll add the colors highlight and highlighttext to the end of the css (emulating our custom stylesheet) to show that the selection color is back to the default.
/* colours from theme */
::-webkit-selection {
background-color: brown; color: yellow;
}
::-moz-selection {
background-color: brown; color: yellow;
}
::selection {
background-color: brown; color: yellow;
}
/* overriding colors */
::-webkit-selection {
background-color: highlight; color: highlighttext;
}
::-moz-selection {
background-color: highlight; color: highlighttext;
}
::selection {
background-color: highlight; color: highlighttext;
}
<div>This is a div in which you can make a selection</div>
Disclaimer: these system colors are officially deprecated; there is no proper replacement yet though. Also, in Chrome it seems to reset the colors to slightly different ones than they have in the absence of any styles; I seem to have to do some more research.
So text selection was made stylable trough the ::selection pseudo element in order to override the browser's default selection color. But to me, it seems that white as a selection background color is forbidden in favor of a greyish, opaque color.
::selection { color: black; background: white; }
::-moz-selection { color: black; background: white; }
body {
background: black;
color: white;
}
So selecting me is supposed to invert the text and background colors. But the selected text background color is not white, but grey.
Why does this not create a perfectly white background ? Instead, it shows a grey background (#989898)
Also see this snippet on https://jsfiddle.net/duk3/hzodm1sh/
Ok so following this question I found the answer :
For some reason Chrome forces it to be semi-transparent. However, you
can get around this by setting the background using rgba. I have set
the alpha value to be just 0.01 less than 1.
::selection { color: black; background: rgba(255, 255, 255, 0.996);
; }
body {
background: black;
color: white;
}
Selecting me DOES invert the text and background colors. Well, almost, but it looks like perfect white.
Maybe it's a browser specific problem.
Try this:
Fiddle
::selection {
color: black;
background: white;
}
body {
background: black;
color: white;
}
::-moz-selection {
color: black;
background: white;
}
So selecting me is supposed to invert the text and background colors.
Here is the result in a print:
I have some anchor links in my application which when disabled should look gray so I applied the following code in css file:-
a[disabled]
{
color: Grey !important;
text-decoration: none !important;
}
This seem to work fine but I want to exclude 1 link from taking this style when disabled. How can I do that?
Looks your selector is wrong. It has to be
a[disabled=disabled]{
color: Grey !important;
text-decoration: none !important;
}
JSFiddle
Reference
try
a[disabled]:not(your selector)
{
color: Grey !important;
text-decoration: none !important;
}
e.g.
a[disabled]:not(:nth-of-type(2))
{
color: Grey !important;
text-decoration: none !important;
}
I am using css selection selector on my blog to override the default behaviour of browser text selection.
The code I use for CSS is given below.
::-moz-selection { background: #ea0000; color: #fff; text-shadow: none; }
::selection { background: #ea0000; color: #fff; text-shadow: none; }
It works on Firefox and IE, but when using Chrome the selection overflows to other areas. Any ideas?
Here's how to test my problem from my blog: semihyagcioglu.com
You need to hide the overflow on your article elements:
article {
overflow: hidden;
}
Its hard to explain so i have an example
I have a left part that should remain black and a right part that is green which changes to red on hover see http://jsfiddle.net/z9jSS/
I want this to LOOK THE SAME but i want make the left part a link too and have the right part change color when i hover over it like the first link. I know how to disable the underline but what i dont know how to do is not have the left part change red on hover while having the right part change colors
http://jsfiddle.net/z9jSS/2/
Is there some trick i can do so a:hover will make a color change red but force the left part to stay black?
Simply override the styles for your spans:
.c a { text-decoration: none; color: inherit; }
.c a:hover .r { color:red; text-decoration: underline; }
Code: http://jsfiddle.net/z9jSS/21/
Seems like everything above was missing one thing or another. This includes everything you asked for, with part of the link being plain black text, and the rest being a green underlined link that turns red when hovering.
http://jsfiddle.net/z9jSS/30/
.c a { color: black; text-decoration: none; }
.c a .r { color: green; text-decoration: underline; }
.c a:hover .r { color: red; text-decoration: underline; }
wrap the part of anchor inside a span or an other tag
try this jsfiddle
Override the styles with a higher specificy style.
.c a:hover span.l { color: blue; }
Working Example.
Try this:
.c a {
color: #000;
text-decoration: none
}
.c a span:first-child + span {
text-decoration: underline;
color: green;
}
.c a:hover span:first-child + span {
color: red
}
See: http://jsfiddle.net/thirtydot/z9jSS/31/
This has the benefit of not needing either of the .l or .r classes.
It will work in all browsers except IE6.