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:
Related
How do I change link and background colours of a.btn.btn-default / btn.btn-default? I can’t find these in any CSS.
See here: https://www.webhosters.co.za/client/whois . There are two buttons at the bottom of the 404 error page. These buttons (home page and contact support) are in white text and white background. they are only visible when one hover over. How do I change the background and text?
Here is the small css snippet you can go through
section#main-body a.btn {
color: #fff;
background-color: #6aaf08;
border: 1px solid #6aaf08;
}
We are here inheriting button class Hope this helps
Happy coding!!
You can give class to that buttons and apply css on that like change in btn background and color
.contact-btn, homepage-btn{
background-color: #6aaf08 !important;
color: #fff !important;
}
or
you can add more parents to .btn-default so your css will be applied first and will be replace .btn-default property
#main-body .btn.btn-default {
background-color: #6aaf08;
color: #fff;
}
/* ------------------ or ------------ /*
if you don't want to add parents class in css you need to give important to that css property..
.btn.btn-default {
background-color: #6aaf08 !important;
color: #fff !important;
}
Great place for styling links is here
so, basically you would be looking for something like:
/* unvisited link */
a:link {
color: red;
background-color: white
}
/* visited link */
a:visited {
color: green;
background-color: white
}
/* mouse over link */
a:hover {
color: hotpink;
background-color: white
}
/* selected link */
a:active {
color: blue;
background-color: white
}
::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
/* 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.
I would like to know if there is a solution for ::selection without any transparency on the background color of the selected text.
In my JSfiddle example i got a white text on a black background, and if i select the text (f.e. to copy it) i want it to show up negativly ( when selected, the text should be black and the selection itself that uses to be bright blue, should be white, but without transparency)
I would be happy when there will be found a solution :)
http://jsfiddle.net/jqSuP/1/
::-moz-selection {
color: black;
background-color: rgba(255,255,255,1);
}
::selection {
color: black;
background: rgba(255,255,255,1);
}
body{
background-color:#000
}
p{
16px;
color:white;
}
In Chrome, I can set the background-color of a text input field and all that changes is the background color. In this way I can highlight fields that need to be paid attention to (make the background light red so that the user knows there's a mistake there). In Firefox, and I suspect other browsers, the background color is changed, but the text field also looks more plain. Inset shadows disappear and when focused on the field there's no blue glow around it. It just looks different.
Is there a way to highlight a text field without changing the look and feel of it in Firefox (and other similar browsers)?
UPDATE: Example code:
<ul>
<li><input type="text" style="background-color: red"/></li>
<li><input type="text"/></li>
</ul>
You can see the difference between the 2 text fields. Hovering and focusing on the normal text field feels native to the OS. But the text field with a red background isn't as good anymore.
Here's the jsfiddle link.
I got the same issue back then, seems that if you want to change the background-color, you must change the border style for Firefox, 2px solid and the color of your choice.
No, I do not believe so. Opera has the same behavior as Firefox. The best solution I came up with was to only style the elements if they required the user's attention (the element has focus or contains invalid data).
This is what I use as part of my Sass bootstrap:
#mixin background($image, $bgcolor) { background: $bgcolor url(#{$imagedir}#{$image}) no-repeat scroll right center }
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
// background-color background-image background-repeat background-attachment background-position
&:required:valid, &:required:in-range {
//border: 1px solid #0f0;
&:focus { outline: 1px solid #0f0; #include background("tick.png", transparent); }
}
&:invalid, &:out-of-range {
#include background("asterisk_orange.png", $required-bg);
border: 1px solid $required-color;
&:focus {
background-image: url("#{$imagedir}exclamation.png"); outline: 1px solid $required-color;
}
}
}
This is what the generated CSS looks like:
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:valid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:in-range:focus, textarea:required:valid:focus, textarea:required:in-range:focus, select:required:valid:focus, select:required:in-range:focus {
outline: 1px solid #0f0;
background: transparent url(icons/silk/tick.png) no-repeat scroll right center;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range, textarea:invalid, textarea:out-of-range, select:invalid, select:out-of-range {
background: #fef8b4 url(icons/silk/asterisk_orange.png) no-repeat scroll right center;
border: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range:focus, textarea:invalid:focus, textarea:out-of-range:focus, select:invalid:focus, select:out-of-range:focus {
background-image: url("icons/silk/exclamation.png");
outline: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus + .tip, textarea:focus + .tip, select:focus + .tip {
display: inline;
position: absolute;
border: 1px solid red;
background: #fef8b4;
margin: 0;
padding: 2px .5em;
}
It's worth noting that for Opera, outline does not cause the element to lose its default styling like border/background does.