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.
Related
I'm using a plugin for chrome called Stylish to change the css of this website. I've successfully changed most of it, but there is this one part I can't change.
Placeholder Color Change:
The worst of these is the color of the placeholder text in the search bar ("Search Quizlet). I wrote some css (shown below), in an attempt to change it. While it changed the placeholder text in another input field (you won't be able to see it unless you are logged in), it did not change the color of the correct one.
::-webkit-input-placeholder,
input::-webkit-input-placeholder,
form input::-webkit-input-placeholder,
input:placeholder-shown,
::placeholder,
#header .search .submit{
color: #999;
}
Above are all my attempts at finding what tag is responsible for changing the placeholder's text color.
What you want to use/change is the following:
input, .actual-edit-overlay {
-webkit-text-fill-color: #fff !important;
}
You're nearly there but not quite. You'll need vendor prefixes for all the browsers.
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder
{
color:#999 !important;
}
Here is a solution from CSS-Tricks
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
Here is two useful link to know more about placeholder and placeholder text style
Style Placeholder Text
:placeholder-shown
My problem:I have a link with display block. Everything goes well on IE9. But when I add a filter in order to obtain a gradient, the cursor only has the hand on the border and on the text, not on the rest of the box.
I have test my code in jsfiddle
May I have done something wrong ?
My code will work on all browsers and versions. I just have delete code for other browser in order to be much clear.
filter works "better" for IE8.
But for IE9 i would raccomend SVG gradients.
Here you can find Microsoft's official SVG gradient background maker
You'll obtain something like this:
/* SVG as background image (IE9/Chrome/Safari/Opera) */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc);
And you can add it to your rule this way:
a {
padding: 3px 5px;
margin:5px;
display:block;
border:1px solid #000;
background:#FAFAFA; /* fallback for browsers not supporting gradients */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); /* FF13, Opera12, IE9 */
background:linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; /* W3C */
}
Then, with conditional comments you can target IE8 again:
.ie8 a {
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
}
Anyway, i suggest you to google for "Visual CSS tool" for a complete cross-browser code.
You're using only -moz-linear-gradient and it works just for older version of Firefox Mozilla.
For IE9 you can also use CSS3: linear-gradient: { ... }
For older versions of Chrome and Safari you should use -webkit-linear-gradient and for Opera -o-linear-gradient and -ms- for IE (but not everything works fine with it).
One solution is to wrap your a in another div and apply your background properties on it instead of on the a;
<div class = "container">Glee is awesome!</div>
CSS:
.container {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
border: 1px solid #000;
padding: 3px 5px;
margin: 5px;
}
a {
display: block;
}
Here's a little demo: little link.
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 noticed a cool effect in Chrome at this site, which may or may not be unique to Chrome but possibly for all Webkit browsers.
When the user drags to highlight something, they've changed the default color to pink.
Can you identify the selector?
I would like to see if someone knows of a reference page which describes these kinds of effects.
use
::-moz-selection,
::selection{
background: #fe57a1;
color: #fff;
text-shadow: none;
}
from HTML5 BoilerPlate
I found this CSS in that page:
::selection {
background: #E02F86;
color: white;
}
Also, tried it here.
Changing the border-bottom attribute along with removing text-decoration creates the colored underline in some browsers (I can vouch for FF 5 and 6 for sure). But other browsers (at least Safari & Chrome) don't display any line.
For example of the problem, see utsarotaract.org (there is a link in the bottom paragraph of the index page).
Since I've seen this work other places, I'm assuming that some of my CSS is clashing but I'm stumped as to where exactly the problem is.
The issue is the size of your border. Change your 0.5px border to 1px instead and it will work. Live example: http://jsfiddle.net/tw16/WcrNA/
.content a {
border-bottom: 1px solid #A80532; /* instead of 0.5px */
color: #000022;
text-decoration: none;
}
You may want to use:
<a><span>I'm a link</span></a>
with the following CSS:
a {
color: blue;
}
span {
color: green;
}
The alternative being using a border-bottom. It's also a cross-browser solution. You'll just have to set its padding/margin/line-height to make it consistent from a browser to another.