Can't remove box shadow on visited link - applied twice - css

Not sure if this is just related to :visited links or a general styling thing with box-shadow, but I can't get it to override.
https://jsfiddle.net/pt39v1yy/1/
I was initially trying to change the color of the box-shadow, but then realized it was not overriding the thing so I tried to remove as well and still nothing. I tried adding !important, unset, initial, etc but inspecting always shows the original box-shadow is not crossed out, it's like it can't be overridden.
a:not(.btn) {
text-decoration: none;
border-bottom: 3px solid #b4e7f8;
box-shadow: inset 0 -4px 0 #b4e7f8;
-webkit-transition: background .35s cubic-bezier(.33,.66,.66,1);
transition: background .35s cubic-bezier(.33,.66,.66,1);
color: inherit;
}
a:not(.btn):hover{
background: #b4e7f8;
text-decoration: none;
}
a:not(.btn):visited {
border-bottom: 3px solid #beb4f8;
background: #beb4f8;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: inherit;
}

Helloo,
According to MDN: You can only apply certain properties to the :visited selector in CSS, and box-shadow is not one of them.
Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used).
For more information on the current limitations take a look at: Privacy and the :visited selector.
Maybe you could do something like this if you really want to have the box-shadow: https://jsfiddle.net/pt39v1yy/2/
I hope this helps!

Related

How to avoid "-internal-autofill-selected" style to be applied?

I have a login form with 2 fields, username and password. Username field is autocompleted by chrome. When I submit the form (when it is valid), this style is applied mysteriously:
input:-internal-autofill-selected {s ñ
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark-color(black, white) !important;
}
Is there a way to avoid that? The form is submitted using Ajax, so it is a little ugly if for Username field that style is applied, but for Password field it is not.
I noticed that this happen only if field is filled with an element in the chrome sugggestions list. If field is filled with a value that is not in the list, the style is not applied.
Regards
Jaime
To get rid of the undesired behavior, this trick "just works" (tm):
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
The answer is not intuitive. It's more a trick than anything else but it looks like it's the only one that works:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px yellow inset;
}
This will style a yellow background to you input. It's basically a very opaque and overwhelming inner shadow. They use the same trick in the link #ravb79 sent.
If you're ok with the default -internal-autofill-selected styling on a light theme and just want it to look nicer in a dark theme then you might just need:
input {
color-scheme: dark;
}
You can add a box-shadow to remove the blue background
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);
I tried overwriting the style but for some reason it didn't work at all. Webkit or at least chrome just ignored that style.
When I added !important to the style webkit / chrome just flat-out removed it from the equation entirely. Nowhere to be seen in the element inspector.
Everything I tried got either ignored or removed.
Sooo, I came up with this horrible bullshit. But it works so far.
// Fix autocomplete shit
function fix_autocomplete_shit() {
setTimeout(() => {
if ($(this).is(':-internal-autofill-selected')) {
var clone = $(this).clone(true, true);
$(this).after(clone);
$(this).remove();
}
}, 10);
}
$('.form-control').on('input', fix_autocomplete_shit);
I'm using bootstrap and I want to keep validation icons in form of background-images.
Only god knows why the webkit creators thought they absolutely have to set background-image to none but if they want war they can have it.
You could just add your own CSS so the updated state matches your regular input state. Adding an extra class to your declaration together with the !important attribute should override it.
So:
input.my-input {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
input.my-input:-internal-autofill-selected {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
I also found this btw: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
I slightly tweaked #kostiantyn-ko's answer to only be applied to invalid inputs.
Sass:
input {
&:is(:invalid, [aria-invalid=true]) {
// your error styles
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
// hack needed to get rid of autofill styles only on invalid forms
&:is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}
}
}
CSS:
/* your error styles */
input:is(:invalid, [aria-invalid=true]) {
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
}
/* hack needed to get rid of autofill styles only on invalid forms */
input:is(:invalid, [aria-invalid=true]):is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}

In div, how do I make the background transparent, but not the outline?

Title says it all, I want to have the background at 50% opacity and the outline non-transparent.
div
{
opacity:0.5;
Border:1px solid #000000;
background-color:#000000;
}
Any help is appreciated.
Use rgba
the a is for opacity of the background... which can be 0 through 1 , 0 is invisible, 1 is fully visible..
div {
background-color: rgba(0,0,0,.5);
border: 1px solid black;
}
setting opacity will automatically set anything related to that class, including outline and even child nodes.
You can use rgba() to make a semi-transparent background color.
like this:
background-color:#000000; //fall-back for old browsers that don't support rgba
background-color: rgba(0,0,0,0.5); //set background color. red=0, green=0, blue=0, alpha=0.5
http://css-tricks.com/rgba-browser-support/

IE 9 dotted lines around Checkbox

Problem with IE 9 and earlier IE browsers putting dotted lines around my checkboxs. It seems to want to call post textarea and post input adding a border around the checkbox and then calling post input focus and putting a background around it.
The dotted line wont go away even if I put border 0px in post input. No other browser FF, chrome does this....
Nothing to do with the checkbox .reset file
Image in IE 9: http://i46.tinypic.com/hvqj2g.png
Code Calling: http://i46.tinypic.com/30ic1f5.png
#post textarea,
#post input {
border:1px solid #ddd;
}
#post textarea:focus {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
#post input:focus {
-moz-box-shadow: 0px 0px 0px 2px #eee ;
-webkit-box-shadow: 0px 0px 0px 2px #eee ;
box-shadow: 0px 0px 0px 2px #eee ;
background: #fefcbe;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#post input#submit-btn{
background: #eee;
color:#444;
text-shadow: 1px 1px 1px #fff;
}
Any ideas for IE 9?
The dotted line is “focus rectangle”, a usability feature that has unfortunately been implemented inconsistently in browsers. As you remark in your comment, it disappears if you set outline: none on the element; the focus rectangle is technically an outline resulting from a browser’s default style sheet. This means, among other things, that a person who uses the Tab key to move inside the page (possibly because he has to) will not see any focus indicator there, i.e. does not see where he is.
Depending on the state (Quirks Mode vs. “Standards” Mode) of IE 9, the focus rectangle appears around the checkbox, or around the associated label. The comments above apply to “Standards” mode.
Your issue of “its acting like a text box” as per your comment cannot be resolved without knowing what you mean by it and without having access to the code. Please post actual code or a URL of code, not a screenshot that contains an image of a fragment of code.
Works for me:
element:focus{
outline: thin transparent;
}
try using some javascript in your HTML element:
<input onclick="this.blur()" />

Transparent shadows in IE

I have the following code, which makes a box with rounded corners and shadow. It should be compatible with all browsers and it really is, but the thing is I need transparent shadow and IE doesn't support RGBA values :(
<style>
#box {
width: 250px;
height: 250px;
background-color: #1e9ad3;
padding: 20px;
margin: 20px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
behavior: url(PIE.htc);
box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
<div id="box">
Hello world!
</div>
</body>
Any suggestions how to do this? My "box" could be on different backgrounds, or on the background with texture, so that's why I can't make the color of shadow for example light grey.
Here's the live example: http://bbin.own.cz/box.html
The CSS3Pie documentation gives the answer.
PIE parses RGBA color values wherever they are allowed. However it is only able to successfully render their opacity value in a few contexts. In all other contexts they will be rendered with the correct RGB color, but fully opaque. Here are the supported contexts in which the opacity will be rendered correctly:
The solid background-color as specified in the -pie-background property.
The color value of box-shadow, if the shadow has no blur.
In short, the answer is no, this can't be done. IE simply doesn't support RGBA properly. CSS3Pie is able to do it in a few contexts, but a box shadow with a blur is not going to work.
If CSS3Pie can't do it, then it's a pretty good bet that it simply isn't possible in IE.
You'll be able to do it if you lose the blur, but of course that changes the whole effect, so it's not really a solution for you.
You'll need to use custom MS settings for pre IE8
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
Havent tested this but you can google for more info. source

Custom CSS for <audio> tag?

I'm building a music player web application which implements the HTML5 audio tag, however would like it to look consistent across browsers - is it possible to define my own custom CSS? And how?
There is not currently any way to style HTML5 <audio> players using CSS. Instead, you can leave off the control attribute, and implement your own controls using Javascript. If you don't want to implement them all on your own, I'd recommend using an existing themeable HTML5 audio player, such as jPlayer.
I discovered quite by accident (I was working with images at the time) that the box-shadow, border-radius and transitions work quite well with the bog-standard audio tag player. I have this working in Chrome, FF and Opera.
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
with:-
audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow: 2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}
I grant you it only "tarts it up a bit", but it makes them a sight more exciting than what's already there, and without doing MAJOR fannying about in JS.
NOT available in IE, unfortunately (not yet supporting the transition bit), but it seems to degrade nicely.
You can style audio element using some obscure css selectors. Here's a few of them.
audio::-webkit-media-controls-enclosure {
background-color: #c6c6ec;
}
audio::-webkit-media-controls-timeline {}
audio::-webkit-media-controls-volume-control-container {}
audio::-webkit-media-controls-volume-control-container.closed {}
audio::-webkit-media-controls-volume-slider-container {}
audio::-webkit-media-controls-volume-slider {}
audio::-webkit-media-controls-seek-back-button {}
audio::-webkit-media-controls-seek-forward-button {}
audio::-webkit-media-controls-fullscreen-button {}
audio::-webkit-media-controls-rewind-button {}
audio::-webkit-media-controls-return-to-realtime-button {}
audio::-webkit-media-controls-toggle-closed-captions-button {}
Haven't found an exhaustive list of these, but here's the closest thing.
Besides the box-shadow, transform and border options mentioned in other answers, WebKit browsers currently also obey -webkit-text-fill-color to set the colour of the "time elapsed" numbers, but since there is no way to set their background (which might vary with platform, e.g. inverted high-contrast modes on some operating systems), you would be advised to set -webkit-text-fill-color to the value "initial" if you've used it elsewhere and the audio element is inheriting this, otherwise some users might find those numbers unreadable.
There are CSS options for the audio tag.
Like: html 5 audio tag width
But if you play around with it you'll see results can be unexpected - as of August 2012.

Resources