I am trying to override the default setting for selection. I did
::selection{
background: grey;
}
and it looks like that takes effect when the window is not focused, but when it is focused, it does not have effect and the default color appears. It is not working. What is the correct way to do this so that is has effect irrespective of the focus?
Edit I think I was wrong. I want to change the color of the selected text in <input> tag. How can I do that?
You're probably using Firefox, which needs the -moz prefix:
::selection {
color: fireBrick;
}
::-moz-selection {
color: fireBrick;
}
Demo: http://jsfiddle.net/N4AUY/
Note that you cannot group these together. One of these won't work, so the whole rule block breaks.
Should Work fine, See this demo. the problem seems to be due to something else
::selection
{
background: grey;
}
::-moz-selection
{
background: grey;
}
It is the default browser behavior which you cannot change, when window is not focused, the selected color changes to grey, may be it denotes that the text cannot be copied (kinda disabled selection), so we cannot control that color
Example 2
Related
On my website, when I click on a link that has a href or onclick reference, it gets a blue highlight that ends my design. How to remove? See an example in the menu icon that has an 'onclick' reference, I managed to take a print right from the time I click on it on my phone.
How can I remove this?
The icon is blue that I did not program, all links on the site look like this
If a media screen solution suit you. That can work:
#media screen and (max-width:500px) {
.selector:active, .selector:hover {
background-color: unset;
color: #999;
}
}
Given that we're working with an "a" element you can easily get rid of the blue highlighting with basic css:
a:hover, a:focus, a:active {
text-decoration: none;
color: #3c4146 /* Just a mild gray, you can change this to whatever you want */
}
In the case of a different element, which in your case looks like a btn/div with a set background, you can adapt the css to it.
You can set the bg back to its original color when you either hover, focus or set the element to active.
.element:focus, .element:active, .element:hover {
background-color: #000000; /* Use the original element background-color here */
}
a {
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
}
I was testing my new pet project on my phone and I also had an issue with BLUE outline/highlight flashing effect upon TAP.
For me #RedhaBenKortbi answer worked.
After applying this CSS to tags, the links were no longer flashing with the blue-ish outline/highlight when you click.
.scaledImage a {
-webkit-tap-highlight-color: transparent !important;
}
Doc says:
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being
tapped. The highlighting indicates to the user that their tap is being
successfully recognized, and indicates which element they're tapping
on.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
So I've been working on this for 2 days now and can't get my option box to change to black text.
I've tried the !important tag and even that is not overriding the white font color.
option {
color: #000 !important;}
https://www.outkastfabworx.com/checkout/
Is the the site.
The state and country select box will not display in black text unless I make the body font black, but then almost everything is black.
I've tried a few things I've seen on Stack but so far none of them have allowed me to override the style.
Any help is appreciated, even point me in the direction I need to look.'
Update: Screenshot of error
You do have to add an item to cart before you go to checkout so you can replicate the error.
Option can't be styled with css. WooCommerce uses jQuery for selects.
.select2-container--default li {
color: #444444;
}
.select2-container--default li:hover,
.select2-container--default li:focus,
.select2-container--default li:active {
color: #fff;
}
You may have to add !important on both (example: color: #444!important;) or use greater specificity or put this CSS after all other css as long as the specificity is the same.
¿Do you want to change the color of the text (in this case "Return to Shop" to black?.
Try this.
.button.wc-backward {
color: black;
}
ScreenShot
If that's not what you're looking for, you need to be more specific.
I've successfully styled the standard look of the radio button in Metro with
input[type=radio]::-ms-check {
border: none;
background: transparent url('myImage.png');
}
and the active state with
input[type=radio]::-ms-check:active {
border: none;
background: transparent url('myActiveImage.png');
}
But I cannot for the life of me figure out how to style the checked state. The obvious choices don't work:
input[type=radio]::-ms-check:checked {}
input[type=radio]:checked {}
Is this even possible in Metro?
UPDATE:
input[type=radio]:checked::-ms-check {
background: red;
}
... works to change the background color, but it does not remove the radio dot. This is what I would need to do if I want to use my own image in the background. Can the dot be removed?
The problem is you are not using the correct amount of colons for ::-ms-check. It's a pseudo-element, so it has two colons. (As opposed to pseudo-selectors, which have one.)
You also have the order backward. You need to specify that you want to work with the ::-ms-check pseudo element of a :checked radio button, instead of getting the ::-ms-check pseudo-element and then trying to style a :checked version of it.
Thus, the following should work:
input[type=radio]::-ms-check {
background: orange;
}
input[type=radio]:checked::-ms-check {
background: blue;
color: red; // to remove it, `color: transparent`
}
Live demo (for viewing in IE10): http://codepen.io/anon/pen/zAwyp
I've searched around a lot and see people suggesting that:
::-moz-selection {background: red;}
::selection {background: red; }
..works for colouring the background of the currently selected items in a multiple select form item. (Note: I mean the selected items, not the items with focus).
I can't get this to work. Am I doing it wrong?
#dropdowns select::selection {
background: red;
}
Cheers :/
Setup: Using Chrome for Mac
Instead of only setting a background-color you can also set a linear-gradient as background:
option:checked {
background: red linear-gradient(0deg, red 0%, red 100%);
}
This works in IE11 and latest Chrome and Firefox. Safari just ignores it. Did not test IE/Edge.
If you want to set the background color only for focused multi-selects you can use this snippet:
select[multiple]:focus option:checked {
background: red linear-gradient(0deg, red 0%, red 100%);
}
See the full demo here: http://codepen.io/marceltschopp/pen/PNyqKp
::selection doesn't apply to selected options; it applies to highlighted text. Either you're misinterpreting their suggestions, or what they said is flat-out wrong.
According to this answer, you're supposed to be able to use option:checked for styling the selected items:
#dropdowns option:checked {
background: red;
}
But I haven't been able to get it to work for <select> or <select multiple> elements in this test fiddle.
I found this because I was having the same problem, I did find an odd solution that seems to work atleast with chrome and maybe others. The solution was to use an attribute selector. This seemed to work with chrome, I tested it in the js fiddle. A side note that the box did not immediately change color to background red but once I selected another option I could clearly see that it had indeed turned red. You can check it out in the jsfiddle listed above.
http://jsfiddle.net/vzDvK/1/
#dropdowns option[selected] {
background: red;
}
The right CSS Selector for you would be :checked
::selection is only for text that has been highlighted:
http://reference.sitepoint.com/css/pseudoelement-selection
I mean: when you select some HTML text there is a color in the background which tells you which text you've selected. How is it possible thru CSS to change it? I need it to be white, transparent. I have seen this done.
You can use certain CSS selectors to change CSS properties on selected text. (I tested this and it worked in Firefox, Safari, Chrome, and even Konqueror, but not IE). Example:
*::selection {
background: #cc0000;
color: #ffffff;
}
*::-moz-selection {
background: #cc0000;
color: #ffffff;
}
*::-webkit-selection {
background: #cc0000;
color: #ffffff;
}
You have to specify each selector separately or else it doesn't work (I guess the CSS parser stops processing a selector if it encounters an error). This changes the background color of the selected text to dark red and the color to white (and any other CSS you want to change). This doesn't have great cross-browser support (doesn't work in IE, and probably not Opera, either), but I think it is the only solution possible without some kind of complicated, buggy JavaScript script.
More info: http://www.quirksmode.org/css/selection.html