I am working with bootstrap 4. I would like to know if there is a way to change the scrollbar style. I just tried with webkit mode, but does not work.
The following code will works for webkit
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Bhoot's code above works, but I added a backgound-color for the thumb because I am using a dark background.
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color:#fff;
-webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}
If you are trying on any div or elements for scroll bar customization, please assign and use element id in the CSS as below,
<div class="cardsContainer" id="cards-container">
#cards-container::-webkit-scrollbar {
width: 8px;
background-color: #F5F5F5;
}
#cards-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(104, 140, 240, 0.3);
}
#cards-container::-webkit-scrollbar-thumb {
background-color: lightblue;
outline: 1px solid slategrey;
}
The above way, it worked for me, even though it didn't work when I tried as follows,
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Related
How to remove Scrollbar but don't remove scroll line and how to indent this line?
::-webkit-scrollbar {
width: 10px;
opacity: 0;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
border-radius: 10px;
display: none;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.9);
background-color: #ff8000;
}
I have styled scrollbar of element on chrome using
aside::-webkit-scrollbar {
width: 5px;
color: skyblue;
}
aside::-moz-scrollbar {
width: 5px;
color: skyblue;
}
aside::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
aside::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
aside::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
aside::-moz-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
aside::-webkit-scrollbar-thumb{
background: skyblue;
}
aside::-moz-scrollbar-thumb{
background: skyblue;
}
as I tried to implement same thing on Firefox I found out Mozilla no more supports old styling scrollbar method...
Is there any way to style a scrollbar in Firefox now?
not possible with css
you can try jscrollpane
In my experience not possible to that.We have to add some plugings for that.
Please refer this link: Custom CSS Scrollbar for Firefox
I put the custom scroll bar it works on all browser but on Firefox it doesn't work.
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-moz-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
Firefox does not support custom scrollbars. See more at https://bugzilla.mozilla.org/show_bug.cgi?id=77790.
You can use JQuery Custom Scrollbar.
How to add bootstrap focus glow to Bootstrap Tags Input (for Bootstrap 3)?
bootstrap-tagsinput.css file:
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
Is it possible to vertically align labels?
Thanks.
It is currently impossible in pure CSS as there is no parent selector but you can do it in JavaScript:
$('.bootstrap-tagsinput').focusin(function() {
$(this).addClass('focus');
});
$('.bootstrap-tagsinput').focusout(function() {
$(this).removeClass('focus');
});
and CSS:
.focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
}
Straight from Bootstrap site. If you look at their focus CSS it looks like this.
#focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
What you might want to try is add the above onto your class from your code above. It would look like this.
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
I have not tried this on anything. But I think this might help you.
I created a website. I customized the main vertical scrollbar.
It works good on Google Chrome and Safari but not in Mozilla Firefox.
Do you have any idea to fix this problem ?
CSS CODE
::-webkit-scrollbar {
width: 10px;
height: 6px;
background: #FFF url(images/bg-blog-repeat.png) 0 0 repeat;
}
::-webkit-scrollbar-thumb {
border: solid 0 transparent;
border-right-width: 4px;
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 9px 5px;
-webkit-border-bottom-right-radius: 9px 5px;
-webkit-box-shadow: inset 0 0 0 1px rgb(79,79,79), inset 0 0 0 6px rgb(102,102,102);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 0 1px rgb(90,90,90), inset 0 0 0 6px rgb(110,110,110);
}
::-webkit-scrollbar-thumb:horizontal {
border-right-width: 0;
border-bottom-width: 2px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px 9px;
-webkit-border-bottom-left-radius: 5px 9px;
}
::-webkit-scrollbar-corner {
background: #FFF url(images/bg-blog-repeat.png) 0 0 no-repeat;
}
body ::-webkit-scrollbar {
background: transparent none;
}
Thanks.
For every line that begins with -webkit-, write another exactly like it, replacing -webkit- with -moz-