I'm trying to modify the default selection styles by using the ::selection and ::-moz-selection pseudoelements. I've successfully changed the selection color and background with these two rules:
::-moz-selection{ background: #444; color:#fff; text-shadow: none; }
::selection { background:#444; color:#fff; text-shadow: none; }
However, I also need to change the border-color to white on selection for links. I'm trying to accomplish this with this CSS:
a::-moz-selection { border-color:#FFF;}
a::selection {border-color:#FFF; }
Even when I add an !important override, Safari won't style the border color.
What am I missing? Why can't I change a link's border-color on selection?
You can't define border styles for text selections.
Try defining an outline instead (it was going to be one of the allowed properties as stated in the old spec and the SitePoint Reference):
a::-moz-selection { outline: 1px solid #fff; }
a::selection { outline: 1px solid #fff; }
If that doesn't work, then I'm afraid the browser just doesn't support outlines on ::selection.
Remember that ::selection has been move out of the Selectors spec, with the rest of CSS level 3 still being a draft, so you can't rely on browsers implementing it correctly/completely just yet.
Related
On iOS (Safari 5) I have to following for input element (top inner shadow):
I want to remove top shadow, bug -webkit-appearance doesn't save.
Current style is:
input {
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
You'll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.
Try this:
input[type=text] {
/* Remove First */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Then Style */
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
}
Helpful Links:
You can learn more about appearance here:
http://css-tricks.com/almanac/properties/a/appearance/
If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:
http://css-tricks.com/attribute-selectors/
background-clip: padding-box;
Seems to remove the shadows as well.
As #davidpauljunior mentioned; be careful setting -webkit-appearance on a general input selector.
webkit will remove all properties
-webkit-appearance: none;
Try using the property box-shadow to remove the shadow on your input element
box-shadow: none !important;
Whilst the accepted answer is a good start, as others have pointed out, it only works for inputs whose type is "text". There are a myriad of other input types which also render as text boxes on iOS, and so we need to expand this rule to take into account these other types.
Here's the CSS I'm using to rid input text fields and textareas of the inner shadow, whilst preserving the default styling for buttons, checkboxes, range sliders, date/time dropdowns and radio buttons, all of which are authored using the humble <input> tag too.
textarea,
input:matches(
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"]
) {
-webkit-appearance: none;
}
I tried to come up with a solution that a.) works and b.) I am able to understand why it works.
I do know that the shadow for inputs (and the rounded border for input[type="search"]) comes from a background-image.
So obviously setting background-image: none was my first attempt, but this does not seem work.
Setting background-image: url() works, but i am still concerned about having a empty url(). Altough it currently is just a bad feeling.
background-clip: padding-box; seems to do the job as well, but even after reading the "background-clip" docs I don't get why this completly removes the background.
My favorite solution:
background-image: linear-gradient(transparent, transparent);
This is valid css and I do understand how it works.
This works better for me. Plus it means I don't have to apply it to every different type of input (i.e. text, tel, email, etc).
* {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I have an anchor element that I want to draw a border around when the cursor hovers over it. The problem is that the anchor text and everything to its right "jumps" slightly to the right when the border is drawn.
I thought I'd be clever and style the anchor with a border of the background color (via "inherit") so that a default border is drawn when there is no hover. Then, when the user hovers, the red border is simply drawn over the background border and the text should not jump to the right. But this approach does not work.
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn? Secondarily, I would like to know how to prevent the text from jumping.
Here are the styles and a JSFiddle: https://jsfiddle.net/tlbaxter99/zoLr4m8j/6/
a:link, a:visited {
border: 1px solid inherit;
}
a:hover {
border: 1px solid red;
}
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn?
It's not working because 1px solid inherit is an invalid value:
According to MDN, you can't use the inherit value as part of a shorthand declaration (like in your case). Here is the relevant, in-depth quote:
Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
Which means that you would need to use the longhand border-color property in order to inherit the border-color value:
Example Here
a:link,
a:visited {
border: 1px solid;
border-color: inherit;
}
Secondarily, I would like to know how to prevent the text from jumping.
If you don't want the inherited border color, simply use a transparent border to displace the added border:
Example Here
a {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
Alternatively, rather than using a border, you could also use the outline property to add an outline to the element that doesn't affect the element's box model:
Updated Example
a:hover {
outline: 1px solid red;
}
You need to tell the initial position about the border too. So initially, give transparent border, giving the space.
body {
padding: 1em;
}
a:link,
a:visited {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
<p>
Hello This is a link and here is more text, <b>which doesn't move</b>.
</p>
Now it dares not to move. :) The reason why inherit doesn't work is, none would be the inherited value and it causes border to be 0px. (I am not sure, but that's what is compiled.)
instead of using inherit , try
transparent
Then your css class will look like the one below
a:link, a:visited {
border: 1px solid transparent;
}
This will make sure the border space is already taken and when you hover it doesn't hurt
I'm trying to use CSS currentColor as a border-color to generate CSS triangles using :after content. This works great in all browsers I've tried, except one: Safari seems to be caching the currentColor from the first triangle it generates, and then using that everywhere.
Here's what I'm seeing -- expected behavior from Chrome (and Firefox, and IE9+):
Incorrect behavior from Safari 8.0.4 on Yosemite 10.10.2 (same on iOS 8.2) -- notice all three triangles are red, not the currentColor of their elements:
Here's a fiddle with the full code demonstrating the problem.
The relevant CSS:
span {
display: inline-block;
border-bottom: 2px solid currentColor;
}
span::after {
/* Generate a triangle (based on Foundation's css-triangle mixin) */
content:"";
display: inline-block;
width: 0;
height: 0;
border: inset 0.4em;
/* Safari seems to cache this currentColor... */
border-color: currentColor transparent transparent transparent;
border-top-style: solid;
}
.red { color: #c00; }
.blue { color: #009; }
The HTML is simple:
<div>
<span class="red">Red</span>
<span>Default</span>
<span class="blue">Blue</span>
</div>
Is this a bug in Safari? A matter of interpretation on the CSS spec?
More importantly, any suggestions for working around this? I'd hate to have to explicitly declare the color in separate :after rules for each element. (Using currentColor really simplifies maintenance as our other CSS changes.)
So, this turns out to be an actual Safari bug (which might be fixed soon).
I was able to work around it using this suggestion that border-color defaults to currentColor. Replace this:
border-color: currentColor transparent transparent transparent;
with expanded properties that avoid mentioning currentColor:
/* border-top-color: currentColor; is the default behavior */
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
and the problem goes away in Safari (and it still works in the other browsers).
Even I faced a similar issue, so i have to go with a small js trick.
With this trick we can use the currentColor attribute to be set correctly in the desired elements. but it can be achieved only for normal elements. so i moved the pseudo elements into normal elements.
You have to force safari to redraw elements to achieve this. To achieve redrawing elements simply hide and show it.
var nodeStack =[element];
while (node = nodeStack.pop()) {
if (node.nodeType == 1) {
node.style.display="none";
node.style.display="";
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
Check this simple codepen (Your code with little modification)
and also read this for brief info
Pseudo elements cannot be achieved through this trick. You have to move that into a span or some other element.
I'm making mobile apps in which there are several span tags in the html and I have applied border to the span without defining the color so that the border would be as per it's color.
here is a demo
So now, I wanted to change the color of span tags on active but not it's border-color and this is why I was trying to make it by setting initial value but seems there's no support for the initial value in border-color.
span:active{
color: red;
border-color: initial;
}
I can manage each colored element active state border-color but it takes a lot of works. Is there any standard way to make element change on its element only but not on it's border?
You can set border-color: inherit:
span:active{
color: red;
border-color: inherit;
}
Take a look here: box model
fiddle
use inherit not initial.
border-color: inherit;
Changing from initial to inherit will do the trick
span:active{
color: red;
border-color: inherit;
}
Working JS Fiddle:
http://jsfiddle.net/fapr39e7/2/
I can't figure this one out. I'm trying to get rid of that blue glow when textarea is highlighted in Firefox.
Here's my CSS:
textarea
{
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
}
:focus {
outline:0;
outline:none;
}
It removes it in Safari, but I'm have no luck with Firefox.
Thanks!
Matt
how about
*:focus {outline:0px none transparent;}
You can remove it with -moz-appearance:none;, though that may affect the whole appearance more than you're wanting.
If you use this on the textarea style:
outline:none;
... it should work with all browsers, not just Firefox
I'm fairly sure that's a Mac OS X theme-specific behaviour.
Just add or define a border... for instance, if a border is defined and I've added outline: none; to my CSS, this does the trick.
I just had an issue with this on a text input- Firefox was using the border property to create the blue glow on :focus - not outline.
input:focus, textarea:focus {
outline: none; // for other browsers
border: none; // only necessary if you haven't set a border on the element
}
You cannot remove the glow in Firefox I think.. Only way to do that would be by adding a custom border to your element, like border: 1px black;, that would make the input box have no glow at all.
Only popular browsers which allows the outline tag are Safari and Chrome (not sure about linux browsers).
on #3
#Solution0:focus{
border:solid #CCC 1px;
outline:1px none transparent;
}
The better way to fix this, in my opinion, is define a custom border and :focus behavior.
textarea {
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
border: none;
}
textarea:focus {
outline: none;
border: none;
}
Slightly unrelated but possibly helpful answer: In my case the blue glow was causing an alignment problem in Firefox only since it adds an extra pixel or two and changes the overall element size. My guess is a lot of people will arrive at this question for similar reasons and rather than remove the blue glow altogether, the solution I came to was to style the input element padding in specifically for Firefox:
#-moz-document url-prefix() {
input:focus {
padding: 5px!important;
}
}
You can change this to suite your needs but it may be helpful for some of you to know about the #-moz-document url-prefix() rule.