CSS:
input:not([type=submit]):focus,
input:not([type=file]):focus,
textarea:focus {
background: #f8f8f8;
-webkit-box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
outline-color:transparent;
outline-style:none;
}
IE9 is ignoring input:not([type=file]):focus and styles its box-shadow, background and so on on the input file focus.
Any ideas whats wrong?
EDIT:
If its NOT supported: Why is IE9 styling it the like above?
If it IS supported: Why is IE9 ignoring :not() ? and styling it like above?
IE9 certainly supports the :not selector - caniuse (as mentioned in comments)
However...
Your CSS is not doing what you think.
In your current code the second rule:
input:not([type=file]):focus
overrides the first rule. So the properties will be applied to all input elements except file - but including submit - and in ALL browsers (not only IE9)
Instead you should chain the selectors like this:
input:not([type=submit]):not([type=file]):focus,
textarea:focus {
background: #f8f8f8;
-webkit-box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
outline-color:transparent;
outline-style:none;
color: pink;
}
Checkout this FIDDLE:
...You can see that the input of types submit and file won't get the styles applied on focus, however the input of type button will get the styles applied on focus.
I tested it in IE9 and it works fine.
Related
I'd like to create a customized Lumo theme in Vaadin 14.6, where the buttons (<vaadin-button>) show a double border (css: box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--some-custom-background-color);) when focussed.
While custom styles for other <vaadin-button> pseudo selectors, such as :hover, :active, etc. work well, I cannot find a way to customize the :focus appearance.
Focus styles need to be customized using the focused and focus-ring state attributes, which are applied on the host element.
The focused attribute is applied the button is focused either with a mouse/pointer or keyboard, while focus-ring is only applied when it’s focused with the keyboard (corresponds to the native :focus-visible pseudo class).
:host([focused]) {
...
}
:host([focus-ring]) {
...
}
I found that it is actually Firefox which is not showing the :focus related css. Chrome and Safari display the style as desired.
For the sake of completeness, this is the related css, which goes into 'vaadin-button.css' in the 'themes/components' folder of the application:
:host([theme~="primary"]:focus) {
height: calc(var(--my-button-size) - 6px);
border-radius: 1px;
background-color: var(--my-button-primary-background-color-focus);
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--my-button-primary-background-color);
}
I have a select form in Bootstrap 4 with dark background, when I select an option I want the background after selection to stay dark. My example works in Chrome and Firefox. But in IE and Edge the background stays white while in focus. Check my jsfiddle, any ideas?
.form-control:focus {
background-color: #121212;
border-color: #121212;
outline: 0;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
https://jsfiddle.net/cd1eyqvr/3/
Keep the .form-control:focus part and add this in your css:
.form-control:focus::-ms-value {
background-color: #242424 !important;
border-color: #121212 !important;
color: #ffffff !important;
outline: 0 !important;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
This part will work in IE11 and Edge.
You can refer to the demo I made: https://jsfiddle.net/yuzhou0602/ofwvuzyr/4/
Check this link from offical docs:
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/
It seems the edge has problems with box shadow and you must add extra css to your stylesheet Check the links blow for more help about your problem Box shadow not working in microsoft edge
And also check this link for complete box shadow in edge solutions
https://css-tricks.com/snippets/css/css-box-shadow/
I'm having trouble applying an outline and drop shadow to some images in a Wordpress widget.
The '2017' theme adds some related rules which conflict with mine and cause the image to appear with a white vertical line in place of the border, which appears to crop the right of the image, as well as the top and bottom border and drop shadow. If I remove these rules in the Chrome DevTools the problem is fixed.
I can't simply remove those rules from the theme as I'm doing this as part of a plugin which users will add to their own sites, so I'd like to update my css to fix the problem without modifying the underlying theme.
Is there a way to do this?
The css in the theme (that I can delete in Chrome DevTools to fix) is:
/* Fixes linked images */
.entry-content a img,
.widget a img {
-webkit-box-shadow: 0 0 0 8px #fff;
box-shadow: 0 0 0 8px #fff;
}
I'm trying to override this in the plugin style sheet with:
.entry-content a img,
.widget a img {
-webkit-box-shadow: none;
box-shadow: none;
}
and adding this as inline CSS to the 'img' tag:
style="border:3px solid orange; box-shadow: 0px 2px 4px 1px #333; -webkit-box-shadow: 0px 2px 4px 1px #333;"
I've also tried adding this inline CSS to the 'a' tag which encloses the images:
style="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;"
This has no effect however.
Can anyone help, please?
The rules of CSS (Cascading style sheets) are as follows:
a more specifically defined rule will override a general one (e.g. a rule specified for div.entry-content will override a rule specified for .entry-content)
the last declaration overrides all the others (e.g. an inline style in the style attribute will override something declared in the external style sheet) - use this rule sparingly as it gets confusing
adding !important to your property will override other declarations - use this rule sparingly as it gets confusing
so the answer is either:
div.entry-content a img,
div.widget a img {
-webkit-box-shadow: none;
box-shadow: none;
}
OR:
.entry-content a img,
.widget a img {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Thanks for the help!
It turned out though that the CSS in the theme was being applied to an image next to the one I was trying to apply the border and shadow to, so I had to override the CSS in that image, in addition to the one I was trying to modify.
So I had to apply this to the other image as well as retaining it in the 'a' tags:
style="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;"
I am working with smartgwt and css. I have different blocks. when a block is focused I change the style name of the block and blur the other blocks.
Everything works correctly except that sometimes when I change block focus two blocks become active (highlighted). It's weird because when I verify the css class through the inspector the inactive block has not the "active" class.
It means that the css style has not rendered correctly. Is that a common problem? Is there a possibility to refresh the rendering of an html element after updating its class name?
.windowFocused {
background-color: #fafafa;
border-color: #50A9CC !important;
-moz-box-shadow: inset 2px 0 0 0 #50A9CC;
-webkit-box-shadow: inset 2px 0 0 0 #50A9CC;
box-shadow: inset 2px 0 0 0 #50A9CC;
}
I add this class when focused and remove it on blur. When I check the page through the inspector it is correctly removed but it keeps the style.
Below code is not working in IE..
input:focus,textarea:focus,select:focus
{
border:1px solid #fafafa;
-webkit-box-shadow:0 0 6px #007eff;
-moz-box-shadow:0 0 5px #007eff;
box-shadow:0 0 5px #007eff;
}
Instead it is not showing textbox border even.
Here is the fiddle link
http://jsfiddle.net/3cKVp/1/
It will not work in IE 7 or earlier, as you can see on this page which shows you a compatibility levels for specific browsers.
:focus pseudoselector and box-shadow CSS property is not supported in IE7. To support focus style changes you will have to bind to focus and blur events in javascript (possibly using jQuery) and add/remove respectively a CSS style that will indicate a "focused" appearance.