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);
}
Related
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.
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.
Is there a way to influence only separate box-shadow properties?
For instance I have these classes to set button size and button color
.btn {
background: gray;
font-size: 15px;
box-shadow: 0 2px 0 0 dark-gray;
}
.btn--primary {
background: blue;
box-shadow: 0 2px 0 0 dark-blue;
}
.btn--secondary {
background: red;
box-shadow: 0 2px 0 0 dark-red;
}
.btn--large {
font-size: 20px;
}
But now, I also want a larger box shadow on .btn--large
Problem is, I have multiple colored buttons, so I would need some sort of "box-shadow-y-size property"
How do you work around this problem? The only way I can think of right now is to do something like this...
.btn--large.btn--primary {
box-shadow: 0 4px 0 0 dark-blue;
}
.btn--large.btn--secondary {
box-shadow: 0 4px 0 0 dark-red;
}
There is sadly only one way to define a box-shadow, but in your case there might be a work-around. If you don't specify a colour for your box-shadow it will default to the colour of the color attribute. Perhaps this is something you can make use of.
For example, if you want to be able to have a differently coloured box-shadow while still retaining the original text color, one way you can achieve this by applying the box-shadow to a :before pseudo element instead of the element itself.
JSFiddle with pseudo element solution
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..
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.