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
Related
I have the following 3 screenshots of which the first 2 are from Chrome and the last one is from IE10. I've built the interface for a Query Builder. The first image shows the default view and on clicking the + button the view changes as shown in the second image.
Following is the CSS which I got for the border around the section.
.container_border {
border: 2px solid rgb(148, 178, 73);
border-radius: 20px;
border-top: none;
margin: 0 -1px -1px;
padding-bottom: 10px;
padding-top: 20px;
}
When I tried the same thing in IE10, the border did not expand automatically and I'm not sure why.
Note: I'm not so fluent with CSS and I make use of Bootstrap for views. This is the first time I'm testing with IE, any best practices recommendations will be appreciated.
I built a website with fixed header, fixed footer, and scrolling body atop WP 4.0 "Twenty Twelve" theme.
Trying to apply boxshadow below header's gray area and above footer's gray area, but cannot get either to work. Let's focus on header. Basic HTML/CSS works, as intended, in simplified form: http://jsfiddle.net/tvq5hw4r/
HTML:
<div id="menubar" class="shadow-below">
<nav id="site-navigation" class="main-navigation" role="navigation">
Home | About | Contact
</nav><!-- #site-navigation -->
</div><!-- #menubar -->
CSS:
#menubar {
width:100%;
height:1em;
background-color: lightgray;
padding: .5em;
color: white;
box-sizing: content-box;
}
.shadow-below {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Yet, I've tested actual web page in multiple browsers (FF, Chrome, IE) on multiple OSes (Vista Home Premium SP2, Android 4.4), and don't see desired result on any combo.
Have tried going through selectors connected to the gray area, id by id and class by class, assigning desired style. At most, I get dropshadow below text (but within gray area, rather than below it); in all other cases, I get no dropshadow whatsoever.
I have also tried taking style code from a working dropshadow on the same page (on an image) and using that verbatim on the relevant selectors: still no change.
Tried using working CSS styling from another website that I also created: no change.
Tried code suggested by other websites (css-tricks and robertnyman- can't post the full links): no change.
Tried adding "!important" to each style declaration: no change.
Since it's not a browser issue or an issue with basic code, it appears to be a problem with how styles are cascading (or how elements are nested), or maybe even with overflow or some such property?
Try giving margin-bottom to .shadow-below
EG
.shadow-below { margin-bottom:10px; }
WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.
my search which is on the right side has a button named as Go, it is on right place in all modern browsers except IE8 (in IE7 and IE6 it is a nightmare but I don't care for those browsers).
I tried a few things but the button is not coming to its place in IE8 can someone tell me why is it so
here is an image to show what I mean
http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png
Here is the demo page http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
and if you don't want to look for the css
here is the css:
.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
0 0 4px #7F241C;
cursor:pointer;
}
This is easily fixed if you create a conditional statement in your html head to wrap your new stylesheet in such as
<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]-->
and put the following CSS into your stylesheet this should fix the problem.
input.formbutton.buttonbloghuts.buttongradient {
position: relative;
top: 8px;
}
You already have a conditional statement in your head to create your HTML5 elements.
Any problems and I'll be happy to help.
Removing the top and bottom margins from .formbox and .formbutton, and setting them both to vertical-align: top; largely sorted the problem in IE8. If you need that vertical space around them, you could move use padding on the parent form (and make it display: block;).
(Using conditional classes makes it a lot easier to target IE-specific fixes like these)
If you could provide a jsfiddle of the button code that would help. IE dev tools aren't cooperating very will with me. If my memory serves, try adding float left on both input fields and see what happens.
Look at this site and at the search: it's really similar done but there's an extra div to do stretchy stuff : http://www.genesismedicalimaging.com
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons