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.
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'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;"
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.
I know this could be a silly question. I have been trying to remove the shadow which comes after clicking any button in ThemeRoller for a while. There is no option given in the data theme roller to change the color or remove it.
Can anyone help me with that.
Thanks
Edit 1
Okay after dwelling into the css this is what worked for me
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
-webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
-moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
}
made the shadow to 0px instead of default 12px.
Note: you have to do it in the respective theme like mine was data-theme-c
Thanks to the people who shared there answers
Well you could try the following styles:
button:active{
box-shadow: none !important;
}
If the issue isnt related to box-shadow, try outline.
Okay after dwelling into the css this is what worked for me
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
-webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
-moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
}
made the shadow to 0px instead of default 12px.
Note: you have to do it in the respective theme like mine was data-theme-c
Thanks to the people who shared there answers
If you go to this website you see that when you scroll down the following style is added through javascript for the top navigation div (#yucsHead):
-webkit-box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
-moz-box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
border-bottom: 1px solid #490f76!important;
I'm a bit new to CSS3 and noticed that CSS now has many features that you first could only do in Javascript. I was therefore wondering whether this is possible through CSS3 as well. I prefer to do things through css where possible.
For finding how much the document has been scrolled we use scrollTop() in jquery, and based on that styles are applied.Your example site does that...I dont think there is a pure CSS 3 solution for this..