I have Googled this but can't find any info on it.
Say you set your page highlight colour to a nice orange:
*::selection {
background: #C44610;
}
Why, when you highlight your page, does the background show as red, I swabbed this colour in photoshop and it gives me a hex value of #c24432 which is way off the orange I selected.
I have tested this on Chrome. In firefox I can't get the selection to work at all, it just gives me the default colour.
Any thoughts?
For example you can edit this code:
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
Don't need the *
Also will need the ::-moz-selection {} for Firefox
BTW, you shoulkd consider that since the selection color is a bit transparent, it changes depending on the background...
Greetings from Argentina
Related
I know this question has a very straightforward answer which has already been provided a zillion times on this site. However, that straightforward answer doesn't seem to serve my purpose. The most commonly advised technique is this:
::selection {
background: #ffcc00;
}
::-moz-selection {
background: #ffcc00;
}
This is what I have got implemented on my site; it's to change the default light blue selection color to a dark yellow (#ffcc00). But take a look at the image below:
If you notice, only the areas with text (or some other object) are getting the yellow highlight color. Other parts are still highlighting in the default light blue color. Is there any way to ensure the color I have chosen applies to the entire page indiscriminately?
try this :
html ::selection{
background: #000;
}
Maybe try this
* ::selection {
background: #ffcc00;
}
* ::-moz-selection {
background: #ffcc00;
}
::-moz-selection{
background:#ffcc00;
color:#000;
}
::selection{
background:#ffcc00;
color:#000;
}
Hi community I have a problem trying to change the color of tooltip extension, it happens that I'm using PrimeFaces 5.1 and extension 3.0, using the thema of grinders pepper, but does not perform the change in white, I leave my code.
<pe:tooltip global="true" />
.ui-tooltip,.ui-tooltip .ui-widget-content {
border: 1px solid #9d9d9d;
color: #000000;
background-color: #ffffff;
}
Hope you can help me, thanks.
In the PF-ext showcase, there also is a background image. That overrides the color (per css standards). When I tried setting the background image to 'none'
.ui-tooltip, .ui-tooltip-content.ui-widget-content {
background-color: yellow;
background-image: none;
}
in the PF-ext showcase, it worked.
Trying to get a border around a link styled with bootstrap (seems to be light blue). Can't find the color in the css file. The border is in another div wrapped around the link. I wanna have the same color between border and link.
I think you are looking for this part:
a {
color: $link-color;
text-decoration: none;
&:hover,
&:focus {
color: $link-hover-color;
text-decoration: underline;
}
&:focus {
#include tab-focus();
}
}
This is on _scaffolding.scss and then its call tab-focus mixin.
Note that this is under the scss version of bootstrap.
Basically you have to overwrite this:
a:focus {
outline: thin dotted;
outline: 5px auto color;
outline-offset: -2px;
}
Place this at the bottom of your bs imports and change color with the one you want.
PS: This is how to solve it, but what Im saying is not the right way to work with BS, but I dont know if you are compiling BS or using a min. version.
Hope it helps
I've been trying to change the default blue hover color to something different in the Select2 elements in the website I'm designing, but no success so far. What's the correct, working css selector which would allow me to change the background color and font color of the hovered choice in the Select2 elements?
Thank you in advance!
Edit:
.select2-drop:hover {
background-color: #efefef;
}
I've tried .select2-container, choice but no success. The added code changes the whole dropdown color on hover, but I need it to only change the hovered option.
Try this
.select2-results .select2-highlighted {
background: #f00;
color: #fff;
}
You can use this to change the hover color, works for the Select2 V4.0.1
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #F0F1F2;
color: #393A3B;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: red;
color:white
}
I am using the following CSS to modify the color of highlighted text:
*::selection {
background: #000;
color: #fff;
}
*::-moz-selection {
background: #000;
color: #fff;
}
In Chrome when you highlight an unordered list the bullets have the default colors
Example: here
Is this a bug or can you use CSS to fix this?
It doesn't look like ::selection is going to make it into the spec, so it makes sense that not a lot of attention was paid to this behaviour.
http://www.w3.org/TR/css3-selectors/
7.3. Blank
This section intentionally left blank. (This section previously
defined a ::selection pseudo-element.)