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.
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);
}
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 want to change style of scroll bar ,for this i used below css ,but i want do use it for specific div on page not for whole page.
how can i customize it using div class or id
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #A8A8A8;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Yes, we can achieve this using element id,
Try this,
#div1::-webkit-scrollbar {
width: 12px;
}
#div1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#div1::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #A8A8A8;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#div1::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Hope it will work...
Live Demo
Note: i think, it's working fine in chrome. but ff & ie it's not working..
If you really want some custom scrollbars then there are some hacks you can use in Javascript and CSS - Nice article on CSS-tricks.
There are plenty of jQuery plugins out there too. One I have used is called Lazybars - really simple to implement.
Hope this helps
CSS customization currently is supported by webkit browsers only (Safari, Google Chrome and Opera now). IE and Firefox do not support CSS styles for scrollbars. To make crossbrowser CSS customizable scrollbar you have to use javascript solution that emulates scroll behavior or replaces native scrollbars with custom elements (native scrollbars are under these custom scrollbar or hidden by wrapper with overflow:hidden).
There are lots of free jQuery plugins. Scrollbar emulators (such as jScrollPane, Malihu Custom Scrollbar, perfect-scrollbar, etc...) provide full control over scrolling content, but have more js (to emulate and handle all events) and scrolling behaior differs from native scrolling behavior. Also, lots of scrollbars on the same page may slow it down.
Scrollbars that uses native scrolling (such as jQuery Scrollbar, Scroller, Baron, etc...) are less in code and guarantee that scrolling will always work (even if plugin does not work because of any bug) + less code (as there is no need to emulate scrolling) + automatically supports all scrolling features like scrolling to focused element, scrolling on text selection, scroll to anchor element, touch scrolling, etc...
You can compare custom scrollbars plugins here
What's the easiest way to create drop shadows around div boxes? A print media designer sent me this example design:
http://glacialsummit.com/shadow.jpg
As you can see, the drop shadow seems to "glow" around the div box. Is this easy to re-create with CSS? Or should I tell the designer it's impractical to create this?
Yes, it is possible, even in IE6.
It is possible with CSS3. But the browsers still use their own CSS property names.
Yes, it is possible with CSS3. Here is the sample:
selector {
-moz-box-shadow: 5px 5px 10px #666;
-webkit-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Would work in most of major browsers except IE.
Here is the explain:
selector {
box-shadow: x-coordinate y-coordinate blur-radius color;
}
Cheers.
I'm interested to find which way of creating box shadows with css is most effective. But that I mean : ease of implementation, flexibility, and cross browser compatibility.
Onion skinning is my personal favorite.
An example can be found in this alistapart article.
This is now very simple to achieve:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33);
First value is the horizontal offset.
Second value is vertical offset.
Third value is spread of blur effect.
Fourth Value is color.
Additionally, you can add another value of inset, which will make the shadow appear on the inside of you block element:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;
This is now very well supported: https://caniuse.com/#feat=css-boxshadow
The way I find most effective currently is this:
The CSS rules needed :
.shadow{
position:relative;
display:block;
background-color:#bbb;
border:1px solid black;
}
.shadowed_item{
position:relative;
border:1px solid black;
background-color:white;
top:-5px;
left:-5px;
}
HTML code on which the CSS is applied:
<div class='shadow'>
<div class='shadowed_item'>I have a shadow.</div>
</div>
I found it very simple to implement, flexible and it works the same on FF 3, IE 6 & 7.