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;
}
Related
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);
}
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(239,149,36,100);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,30);
}
I found this css online which modified the style of the scroll bar. However it also changed the scroll bar of the page itself and I need it to change only the one of the menu list. The menu list id is "cssmenu" . Is it possible and how please?
Just use any selector before your scroll rules
.myscroll {
height: 1000px;
overflow: scroll;
}
.myscroll p {
height: 2000px;
}
.myscroll::-webkit-scrollbar {
width: 12px;
}
/* Track */
.myscroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
.myscroll::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(239,149,36,100);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30);
}
.myscroll::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,30);
}
<div class="myscroll">
<p>Content<p>
</div>
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 want to create the following div border:
I have the green border part sorted, but not the red line along the top. Any ideas?
Code so far:
#myborder {
border: 4px solid green;
}
use this css http://jsfiddle.net/PESHk/3
#myborder {
box-shadow: 0 0 0 4px green, 0 0 0 4px green inset;
border-top:2px solid red;
padding:8px;
}
Working on Hushme's answer: http://jsfiddle.net/PESHk/2/
#myborder {
box-shadow: 0 0 0 4px green, 0 0 0 4px green inset;
border-top: 2px solid red;
padding: 8px;
}
And here by using ::before:
#myborder {
box-shadow: 0px 4px 15px rgba(0,0,0,0.15);
border: 8px solid green;
border-top: 0;
padding: 16px 8px 8px 8px;
position: relative;
}
#myborder::before {
width: 100%;
background: red;
height: 2px;
border: 4px solid green;
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
}
How to create a border shadow inset as in the above image
jsfiddle
<div id="progress-bar">
<div id="bar"></div>
</div>
#progress-bar {
margin-top: 50px;
margin-bottom: 100px;
}
#bar {
width: 97%;
height: 20px;
background-color: #eeebf1;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
You can use the css box-shadow property : Box Shadow
#bar {
width: 97%;
height: 20px;
background-color: #eeebf1;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: 3px 3px 3px #CCC inset;
-webkit-box-shadow: 3px 3px 3px #CCC inset;
box-shadow: 3px 3px 3px #CCC inset;
}
http://jsfiddle.net/8kbwd/2/
Give this a shot...
.shadow {
-moz-box-shadow-top: inset 0 0 10px #000000;
-webkit-box-shadow-top: inset 0 0 10px #000000;
box-shadow-top: inset 0 0 10px #000000;
}