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;
}
Related
I added an "aside" to the essay "To the Person Sitting in Darkness" here (Miscellaneous tab), but the links appear ghostlike. What inline CSS do I need to add to make those links dark (forestgreen would work, probably)?
In your a link, right after the a, add style="color:green" Substitute "green" for any HEX color you want.
You could manually add "style: color #FFF8DC;" to each of the tags in the aside elements
The Philippine-American War
The more efficient way is to add this style to the stylesheet, not inline on each element.
.aside a {
color: #FFF8DC;
}
Hope that helps!
the problem is that your jqueryUI.css file is applying a darker gray here in line 413:
.ui-widget-content a {
color: #222222;
}
if you remove this line you'll get the a to its normal color style which is #333, applied in your CSS file line 476.
a {
color: #333;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
if you want a different color to that links specifically then you just need to set this in your CSS:
#MiscTwainContent a {
color:#whatevercoloryouwant
}
With this in mind, no need for using inline-styling, which it is not a good practice.
The simplest way to do it, since the question is just asking about the link text (inside an a / anchor tag) is this:
a {
color: green;
}
Or better yet, per'aps:
a:link, a:visited {
color: green;
}
I couldn't find any code examples about this.
What I want to do is change the blue colour in the highlight to the orange/red.
This is my code for the text selection colours:
::selection {
background: #CF5C3F; /* WebKit/Blink Browsers */
color: #fff;
}
::-moz-selection {
background: #CF5C3F; /* Gecko Browsers */
color: #fff;
}
looks like it may be a margin problem?
try adding a negative margin-bottom to the ::selection rule and see if it works
so: margin-bottom: -10px;
If you want to make sure it is a margin problem, open up dev tools in your browser and click the magnifying glass and hover over that area to see what it is exactly.
Yup! It is definitely a margin problem. There's a bit of a margin underneath the block that says Example Here multiple times.
If you are trying to implement such a thing that, if you highlight any portion of the web page and its selection changes to this color, then maybe you should do something like this:
*::selection {
background: #CF5C3F; /* WebKit/Blink Browsers */
color: #fff;
}
*::-moz-selection {
background: #CF5C3F; /* Gecko Browsers */
color: #fff;
}
The * will basically select all the HTML tags, and apply that property.
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
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.)
I've a blog hosted on WordPress.com, and i purchased the "Custom CSS" update to modify CSS. Now I want to change some CSS options of Syntax Highlighting provided by Wordpress.com. For example, i want that
[code lang="C"] int main() { } [/code]
will be displayed with a black background instead of standard white one. I've added in Wordpress.com Appareance > Modify CSS the following code:
.syntaxhighlighter
{
background-color: black !important;
}
As explained here, but it doesn't works.
Any idea?
The solution is to not only change the background of the whole syntaxhighlighter, but also of each line, similar to this:
.syntaxhighlighter
{
background-color: black !important;
}
.syntaxhighlighter .line .number
{
color: white !important;
background-color: black !important;
}
/* First line */
.syntaxhighlighter .line.alt1
{
background-color: black !important;
}
/* Second line */
.syntaxhighlighter .line.alt2
{
background-color: black !important;
}
As you're using black as a background-color, i advise you to ensure that color has enough contrast compared to it.
Also, using the firebug plugin for firefox you can see exactly which CSS rule gets applied where, and which classes are availble for styling. (a must when working on hosted systems.)
BTW: I found the soluion at the second link you gave