I need to display a custom scrollbar. I would like to avoid using a jQuery plugin if possible. So can I so something like this with HTML5 & CSS3 ? :
.myScrollableBox {
width: 200px;
height: 500px;
/* Display scrollbar if content is bigger than the box */
overflow: auto;
/* This doesn't work, but can I do something similar? */
scrollbar-image: url(/images/myscrollbar.png);
}
It's actually possible, if browser does support styling of toolbar elements (= is based on WebKit). Although it's not mentioned in many tutorials (such as this brilliant one, for example), you can just use background-url property to use custom image instead of color.
For example, in this page I've changed (in Chrome Developer Tools) styling to...
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
... and voila, I have some cyanid scroller. )
Yes you can, but it is not supported in every browser. Webkit (Chrome etc) has support for this using css:
-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer
Read more: https://www.webkit.org/blog/363/styling-scrollbars/
In Internet Explorer you can user css like
scrollbar-face-color or -ms-scrollbar-face-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
Read more: http://msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx
As far as I know, other browsers do not support this at the moment.
no, that is not really possible. The scrollbar used by the browser is not an image placed inside the html page. It is part of the browser logic. You cannot simply replace that.
Related
So, I’m trying to make my website look as crisp and as clear as possible (as is the goal these days), and was wondering if one of my favourite lines to use to achieve this (“-webkit-font-smoothing: antialiased;”) has a similar counterpart which works universally and has the same effect? Or, are there different ways for different browsers?
If i understand correctly you are may need to use vendor prefixes to achieve what you want with supporting multiple browsers.
Using pure browser specific css is not the best approach. I think the code below is enough for browser compatibility (add ofcourse your font, background, color, etc.).
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
/* font-size relative to 100% of device-font-size */
font-size: 1rem;
}
I have an HTML element textarea with defined CSS rule { resize: both }. In FF when the user mouse over the right bottom corner of textarea the cursor changed according to value of property resize, but in Chrome cursor doesn't change.
Please open this example in FF and Chrome to check the difference.
Is it a bug of Google Chrome and can I fix it with CSS on my side?
Update
I reported bug to Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=942017
Update 2
The bug was fixed in Chrome 80.
Actually, there are, or at least were ways in which you could style the resizer and add cursor: se-resize; on hover. Check out this post: Can I style the resize grabber of textarea?
It describes how you can use ::-webkit-resizer to style the resizer:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
Unfortunately it stopped working in Chrome and I couldn't anything similar. (I think it still works in Safari).
But fear not, it's not hard to make a custom handle. Actually, I would encourage you to use a custom one as the default one is too small and hard to hit. Especially with touch. There are actually a lot of sites that use custom handles (or at least automatic resizers based which grows based on the content. Works great on touch too!).
Ie. Stackoverflow uses a custom handle (TextAreaResizer):
GIF of Stackoverflows resize handle
There are also lots of libraries for exactly that purpose, just do a Google search, and you'll find something that works for you :)
This is rendered by browser itself cant be designed using css
My project needs this scroll bar (image given),
I applied this to my css
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: #FFFFFF;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: rgba(242,91,32,0.9);
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-corner {
background-color: #FFFFFF;
}
but when i checked my page only chrome is showing the effect Firefox (27.0.1) and Internet Explorer(10for) are not responding to the changes.What I must add so that it becomes uniform for all of them ?
As mentioned by N.Nihar in a comment, Firefox and Internet Explorer in current versions don't support scrollbar customisation.
If you need to have the scrollbar styled, you may want to use a custom Javscript or perhaps even better a jQuery based scrollbar element. The first one to show up in google search is a Stack Overflow answer, or you can go for the Tiny scrollbar, or one from this list. There are plenty of Javascript and jQuery based scrollbars readily available.
If you do use one of those, though, be sure to test your solution thoroughly, because the behaviour of 'native' scrollbars is not that easy to mimic.
firefox and IE doesn't have capabilities for customizing scrollbar
When I use the text shadow css, mozilla and chrome are showing different smudging levels.
#dfg{
color: #fff;
text-shadow: 0px 0px 2px white;
}
In mozilla I'm getting a more smudged look which i don't want. I've tried
-moz-text-shadow : 0px 0px 1px white;
but it doesn't help. Is there a method in css to give browser specific text shadow values or should i go for a javascript to identify the browser and then select a shadow level.? Please help.
chrome version
mozilla version
Personally I think a Javascript based method would work best, all modren browsers support the standard CSS shadow function, I think you were thinking of -moz-window-shadow which is a OSX feature.
also look into the blur property of text-shadow, perhaps explicitly defining it?
I've been working with Modernizr and it is a wonderful resource, just a great project. However, the way I've been using it is:
Design with baseline (IE) CSS
Enhance with CSS3 effects for advanced browsers
Unless I was going to completely replace the styles based on behavior, why shouldn't I just add styles such as box shadows, gradients and border radii to the stylesheet? If the browser doesn't understand a rule, it will just ignore it, correct? And if JavaScript is off, I can't use it anyway.
Should I be using the above method in the typical case, and Modernizr for advanced cases? Or is there something wrong with relying on browsers to ignore what they don't understand?
You're totally right that older browsers completely disregard much of what's in CSS3.
Because of that, I do my css3 in my basic selectors.. but often make use of the modernizr's no-feature classes to handle the older browser case:
div.box {
height:50px;
-moz-box-shadow: 3px 3px 5px #555;
-webkit-box-shadow: 3px 3px 5px #555; }
div.box span.fakeshadow {
display:none;
}
.no-boxshadow div.box span.fakeshadow {
display:block; background: url('fakeshadowbg.png');
}
I hope that makes it more clear.
You can use (html 5) elements that some browsers do not support yet. Also you can specify fallback styling.
A lot of browsers create their own CSS rules for things like text-transform. With Modernizr you can write one rule and Modernizr makes it happen for multiple browsers.
I think it's just convenience.