I'm trying to use a custom ::selection effect in Chrome but getting this bad blue coloration on highlighted text:
Here's my CSS:
::selection {
color:#ffffff;
background: #000000;
}
::-moz-selection {
color:#ffffff;
background: #000000;
}
::-webkit-selection {
color:#ffffff;
background: #000000;
}
I can't replicate the error in Firefox - is there anything I can do, or is it just a feature of the browser?
You want to wrap the text in a <p> tag.
I'm a little confused, because the selected text is applying the style from the code you're using... white text on a black background.
Is the light blue part the problem? If that's the case, I think the structure/css of the surrounding container(s) would be more helpful to get to the bottom of this.
Related
I have a problem with my website and I don't know how to fix it.
I set...
::selection {
background: #ff6f5e;
color: #fff;
}
And with normal text, everything is fine within Chrome. The background of the selected text appears red and the color of the font is white.
But when I select my links ( they are CCS underline) the underline disappears. I don't like this and it is also only in Chrome, not in Firefox and Safari.
Here's the URL of one of my blog posts:
https://www.smart-minded.com/en/business/unbounce-alternatives/
I already tried out...
::selection {
background: #ff6f5e;
color: #fff;
text-decoration-color: #333;
}
... but it doesn't work.
Does anybody know how to fix this problem?
This seems to be a quirk with how Google Chrome handles ::selection. As a means of trial and error I considered how you could apply a text-decoration value to an anchor link within ::selection like so:
:any-link::selection {
text-decoration: ...
}
And of course this doesn't work so I again trial and error time... why not a border?
:any-link::selection {
border-bottom: 1px solid blue;
}
Again this doesn't work because ::selection has a limited number of declarations that can be applied to it. Which leads me to the simplest solution: A new background color. Observe.
::selection {
background: #ff6f5e;
color: white;
}
:any-link::selection {
background: blue;
}
<p>One of the most well-known landing page builders out there is Unbounce. While the platform does come with great features, templates, and the ability to integrate with third-party tools, it is pretty pricey. </p>
Because ::selection allows us to change things like background and color you can still achieve the accessibility benefits of an anchor tag standing apart from the rest of the text.
In an Electron webview using findInPage, can you use css to change the result colors?
In the above image, the current find result is highlighted in orange while additional results are highlighted with yellow. I'd like to tweak the styling of both of these
body{
background-color:#000;
color:#fff;
}
h2::-moz-selection { /*Firefox*/
color: #000;
background: #FF9800;
}
::-moz-selection { /*Firefox */
color: #000;
background: yellow;
}
h2::selection {
color: #000;
background: #FF9800;
}
::selection {
color: #000;
background: yellow;
}
<h2>Select some text on this page:</h2>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
In Electron you can use stopfindInPage to stop the find and focus/activate a selection (activateSelection - Focus and click the selection node). As it is also possible to insert css, this may allow you to insert css to update the color/ bg=color of the selected text, by using something like the following :
::selection {
background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ffb7b7; /* Gecko Browsers */
}
I haven't tried it, it's just a suggestion from looking at the API.
There is an interesting article on css tricks that you may also find useful
Hope this helps, and that you find a solution
EDIT:
If you are on mac you could use setUserDefault in the system preferences.
In addition, if you use Nathan Buchar's electron settings, you can use the set method to adjust key values (in mac/windows/linux - see his faq)
When visiting the page in Incognito (removing :visited styles) the link's text is blue, but it should be white.
.button {
color:#ffffff; /* white */
background:#d8eaf0;
}
.button:visited {
color:#ffffff; /* white */
background:#d8eaf0;
}
.button:hover {
color:#ffffff; /* white */
background:#3838a5;
}
.button:active {
color:#ffffff; /* white */
background:#d8eaf0;
}
text
Where your ".button" CSS style is, change it to ".button:link".
Try setting the position to absolute. And if that still doesn't work, go onto incognito mode and go on inspect element and check to see if the text box is overlapping.
If nothing still works, use inspect elements on Google and that should give you a great headstart. Good luck :D
I'm trying use a Bootstrap 3 template and change how highlighted text looks.
By Default, when you select a word with a mouse, it is blue with a white background. I wanted to change only the blue color to sort of red, but when I use the following css, it overwrites whole styling:
::-moz-selection { /* Code for Firefox */
color: rgba(217,83,79,0.50);
}
::selection {
color: rgba(217,83,79,0.50);
}
Here's an example:
I've searched CSS files of bootstrap and the template but I can't find any styling. I was searching for ::selection. How can I find it?
You should specify both the color and the background of the selected text.
Warning: Browser implementation of ::selection is not standardized and the spec for css 4 is not yet approved. That said, according to caniuse ::selection, browser support looks pretty good.
Here's an example of the code below as run in several browsers. Notice that FF and IE by default will theme selections based on the background color to make them more noticeable, while chrome will not. Chrome will also prevent any truly white selection background against a dark themed background.
Here's a Demo in Stack Snippets
.dark { color: #fff; background-color: #333;}
.light { color: #333; background-color: #fff;}
::-moz-selection { color: #D9534F; background: #fff; }
::selection { color: #D9534F; background: #fff; }
<div class="dark" >Dark-Themed </div>
<div class="light">Light-Themed</div>
Here's a Demo in jsFiddle
For more info, read up on MDN on the ::selection psuedo-element or on this article on CSS-Tricks
Is there any way to ensure that my grey font colors do not turn black?
Firefox and Chrome seem to do this in order to prevent white text on black background from turning into white on white. I do not have a background color (except white), so this browser-level conversion is not useful, it only helps in preventing grey colors for no reason.
Is there a way to turn this off? Or should I just stick with techniques like opacity, browser detection, and coloring my grays...
Solution:
#media print {
h1 {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #ccc;
}
#media print and (-webkit-min-device-pixel-ratio:0) {
h1 {
color: #ccc;
-webkit-print-color-adjust: exact;
}
}
}
I found had to :
Add !important to the css rule... and...
In the Firefox print dialog, tick the option for "Appearance: Print background colors"
I couldn't get it to work in Chrome.
Some browsers add more respect to your gray if you add color: Replace #777 with #778. Be wary of opacity. Sometimes, even if the print preview will show great results, it only actually works on select printers. Printers with unlucky firmware will fail to print your text at all if it is gray using opacity.
You just need to output your grey font in svg. Browsers don't change color in svg. Here's an example:
<svg height="40" width="200">
<text font-size="28px" y="25" x="30" fill="#ffffff" >
Some text
</text>
</svg>
I thought that is the only div on that page. Make the following change, it should work fine.
<style>
#media print {
div.red {
color: #cccccc !important;
}
</style>
And change the html of the div tag like below
I found that TEXT color is not inherited by "general purpose" stylesheet, but must be forced again in print css file.
In other words, even if text color is set in the general css file (one with media='all' attribute), it is ignored when printed, at least in Firefox and Chrome.
I found that writing again (redundant but..... necessary) text color in print css file (one with media='print' attribute), color now will be considered.
This solution working in all browsers:
.text{
color: transparent;
text-shadow: 2px 0 #red;
}
Give importance to color:
.bgcol{
background-color:skyblue !important;
}
.subject_content,h2,p{
color:rgba(255, 255, 255) !important;
margin: 25px auto;
}
<body class="bgcol">
<div class="subject_content">
<h2 class='text-center'>fhddfhnt area</h2>
<p>sdgdfghdfhdfh.</p>
</div>
Nothing above was working for me so I finally figured it out.
Always give colors to direct elements. Ex. Suppose your html is
<div class='div'><br/>
< h1>Text< /h1><br/>
</div>
and your CSS
.div {
color: #ccc;
}
This was my case. In this case no matter what you do the color won't show.
You have to do
.div h1 {
color: #ccc;
}
#media print {
.div h1 {
-webkit-print-color-adjust: exact;
}
}
Hope this helps you!!
Please reply if you find a better solution as this is what I could find after 2 hrs and it works for me.