Is there anyway to control the styling of the scrollbars of a div tag? I am experiencing some contrast issues between IE7 and FireFox 3.5.2. Any help would be greatly appreciated!
Using javascript you can style the scroll bars. Which works fine in IE as well as FF.
Check the below links
From Twinhelix
,
Example 2
,
Example 3
[or] you can find some 30 type of scroll style types by click the below link
30 scrolling techniques
No, you can't in Firefox, Safari, etc. You can in Internet Explorer. There are several scripts out there that will allow you to make a scroll bar.
This one does well its scrolling job. It's very easy to understand, just really few lines of code, well written and totally readable.
Looking at the web I find some simple way to style scrollbars.
This is THE guy!
http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
And here my implementation!
https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png
/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 13px;
}
::-webkit-scrollbar-button:vertical {
background-color: silver;
border: 1px solid gray;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}
/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
display: none;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:horizontal:increment {
display: none;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:horizontal:decrement {
display: none;
}
::-webkit-scrollbar-track:vertical {
background-color: blue;
border: 1px dashed pink;
}
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
border: 0px;
}
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
border: 0px;
}
/* Track below and above */
::-webkit-scrollbar-track-piece {
background-color: silver;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: gray;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:horizontal {
height: 50px;
background-color: gray;
}
/* Corner */
::-webkit-scrollbar-corner:vertical {
background-color: black;
}
/* Resizer */
::-webkit-scrollbar-resizer:vertical {
background-color: gray;
}
There's also the iScroll project which allows you to style the scrollbars plus get it to work with touch devices. http://cubiq.org/iscroll-4
Related
I have a scrollbar on my page, I want to add a mix-blend-mode on
my scrollbar thumb, unfortunately the logical way
of going by this doesn't seem to work, or am I missing something?
heres a jsfiddle example of the problem
div {
height: 200px;
width: 100px;
overflow: auto;
}
::-webkit-scrollbar {
width: 50px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: red;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
mix-blend-mode: exclusion;
border: 1px solid black;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: lime;
}
As you can see,I have white on top of red which in theory should make the thumb cyan colored.
I need to customize only the width of the scrollbars of Chrome browser using CSS, but need rest of things (like hover effect, color on hover, scrollbar track color, scrollbar button color etc, color of scrollbar on click etc.) as it is.
How can I do it?
I know that we can change the width of the scrollbar using following css:
::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
You can do like that
::-webkit-scrollbar is for the entire scrollbar
handle is scrollbar where you can add background like that and apply also pseudo elements or the draggable scrolling handle.
track is the progress bar of the scrollbar.
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #1B242F;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #04C2C9;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
background: #04C2;
}
For more info visit this link
I changed the css properties of the scrollbar and the buttons disappeared. When I added this to my stylesheet:
::-webkit-scrollbar-button {
display: block;
}
the scrollbar had two rectangles on the top and buttom but there were no arrows. When I tried clicking the top and bottom parts of each of the rectangles, it scrolled up and down. Is there a way to add only one button on each side (top and bottom) that have arrows?
CSS:
/* Properties of Scrollbar */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #4d4d4d;
}
::-webkit-scrollbar-button {
display: block;
}
::-webkit-scrollbar-thumb {
background: #8d8d8d;
}
::-webkit-scrollbar-thumb:hover {
background: #2b2b2b;
}
You're using ::-webkit-scrollbar-button wrong. It's supposed to be used like this:
::-webkit-scrollbar-button {
background: blue;
}
This could also be found here
I'm trying to find a source explaining how to fully style the input type "time". I cannot find a single example explaining all of the style attributes!
Only one I've found is:
input[type="time"]{
/**style goes here **/
}
Which doesn't help much..
Tried this:
input[type="time"]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display: block;
width:20px;
color: red;
text-align:center;
position:relative;
}
Spinner does not turn red for example.
I made some progress styling the input in Chrome/webkit, but I can't figure out how to style anything in Firefox. Here's a demo that I put together on Codepen.
input[type=time] {
border: none;
color: #2a2c2d;
font-size: 14px;
font-family: helvetica;
width: 180px;
}
/* Wrapper around the hour, minute, second, and am/pm fields as well as
the up and down buttons and the 'X' button */
input[type=time]::-webkit-datetime-edit-fields-wrapper {
display: flex;
}
/* The space between the fields - between hour and minute, the minute and
second, second and am/pm */
input[type=time]::-webkit-datetime-edit-text {
padding: 19px 4px;
}
/* The naming convention for the hour, minute, second, and am/pm field is
`-webkit-datetime-edit-{field}-field` */
/* Hour */
input[type=time]::-webkit-datetime-edit-hour-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* Minute */
input[type=time]::-webkit-datetime-edit-minute-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* AM/PM */
input[type=time]::-webkit-datetime-edit-ampm-field {
background-color: #7155d3;
border-radius: 15%;
color: #fff;
padding: 19px 13px;
}
/* 'X' button for resetting/clearing time */
input[type=time]::-webkit-clear-button {
display: none;
}
/* Up/Down arrows for incrementing/decrementing the value */
input[type=time]::-webkit-inner-spin-button {
display: none;
}
<input type="time" value="13:30"/>
I wasn't able to find documentation anywhere. I got this far by inspecting the input's internal DOM, hovering over each element in devTools to see what portion of the UI it corresponded to, then grabbed its pseudo attribute.
If you can't currently see the internal DOM, you'll have to expose it by going into Chrome's DevTools Settings, Preferences, Elements and make sure the "Show user agent shadow DOM" option is enabled.
There's another pseudo element: -webkit-calendar-picker-indicator - the clock that shows up in chrome to allow you picking time using a mouse.
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}
<input type="time">
To style the input type date and time - use the following css -
[type="date"] {
background:transparent url(/assets/images/calendar.png) 97% 50% no-repeat !important;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
[type="time"] {
background:transparent url(/assets/images/clock.png) 97% 50% no-repeat !important;
}
[type="time"]::-webkit-inner-spin-button {
display: none;
}
[type="time"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
How to hide QScrollBar arrows?
I need to hide in horizontal scrollbar.
I was trying to hide with setStyleSheet:
setStyleSheet(" QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal { height:0px; }" )
but it doesn't work.
If you need to hide just the arrows inside buttons then you can try to set background and border in this way:
QScrollBar::right-arrow:horizontal, QScrollBar::left-arrow:horizontal
{
border: none;
background: none;
color: none;
}
If you want to hide whole buttons then you go with code below.
QScrollBar::add-line:horizontal {
border: none;
background: none;
}
QScrollBar::sub-line:horizontal {
border: none;
background: none;
}
I know this is an old question, but I've ran into an issue with this question's approved answer, and I've found a fix for it so I'm going to leave this here in case someone runs into the same problem that I did.
While the accepted answer suggests setting border, background and color to none, this only visually hides the scrollbar arrows. What I mean by this is that you can still click them, and the scrollbar's handle, while it can move to the place they occupied, can not be clicked on if your cursor is in the area the arrow buttons occupied.
To also functionally hide them, you should set their width and height styles to 0px as well. This will make it so you can click on the handle if the scrollbar's handle is in the area the arrow-buttons occupied.
In order to hide a scroll bar you can set the scroll bar policy for that particular scroll bar (horizontal in your case). For example:
QScrollBar scrollBar;
scrollBar.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
Create a QScrollBar and assign it this stylesheet and this should do the trick. See example below.
QScrollBar:vertical {
width: 15px;
background: #f1f1f1;
}
QScrollBar::handle:vertical {
background: #888;
}
QScrollBar::add-line:vertical {
border: 2px solid gray;
background: #f1f1f1;
}
QScrollBar::sub-line:horizontal {
border: 2px solid gray;
background: #f1f1f1;
}
QScrollBar::handle:hover:vertical {
background: #555;
}