I am trying to change the width of the scrollbar through -webkit-scrollbar property but Chrome rejects it saying that it is an unknown property. Any idea why ?
Works well in Chrome — http://jsfiddle.net/sergdenisov/wqr5zxpk/2/:
div {
height: 200px;
background: #f7f6f5;
overflow-x: hidden;
overflow-y: auto;
}
div::-webkit-scrollbar {
background: #fff;
width: 15px;
height: 15px;
}
div::-webkit-scrollbar-thumb {
background: #c5c5c5;
}
.class::-webkit-scrollbar{ width :6px; }
The above worked for me. I wanted to apply the width only when the class "class" was added to an element.
You can change horizontal and vertical scrollbar width
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
overflow-x: auto;
}
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #F5F5F5;
overflow-x: auto;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #3c8dbc;
overflow-x: auto;
}
Related
I have applied overflov-y scroll using following style:
.custom #front_videos .large-2 {
height: 545px;
overflow-y: scroll;
position: relative;
}
that display scroll like this -> http://nimb.ws/XZ3RVS
I want to display that scroll bar like this -> http://nimb.ws/IGMnXl
So any one have idea how to display scroll bar like this using CSS style then replay me.
Thanks.
I've whipped up some styles for you that looks pretty similar making use of ::-webkit-scrollbar and it's sibling selectors. Note this is only for Chromium browsers, as Scrollbars aren't a part of the W3C spec and thus don't have valid selectors, outside of Chrome's relatively robust pseudo-selectors.
.large-2 {
margin-left: 30px;
float: left;
height: 300px;
overflow-y: scroll;
margin-bottom: 25px;
width: 100px;
background: #ccc;
}
.force-overflow {
min-height: 450px;
}
.large-2::-webkit-scrollbar-track {
border: 1px solid #000;
padding: 2px 0;
background-color: #404040;
}
.large-2::-webkit-scrollbar {
width: 10px;
}
.large-2::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #737272;
border: 1px solid #000;
}
<div class="custom">
<div id="front_videos">
<div class="large-2">
<div class="force-overflow"></div>
</div>
</div>
</div>
There is a relatively graceful JavaScript solution called NanoScroller - though I don't personally have much experience with if, if you're looking for something with more cross-browser ability.
try this:
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-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);
}
Try this snippet.
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background:black;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background:rgb(54, 56, 58);
}
You can style scrollbar using ::-webkit-scrollbar prefix but it only work in webkit.
I think you better use "jquery.mCustomScrollbar.concat.min" this jquery plugin. It support most of the browser.
Trying to simulate a top border that doesn't start at the left edge of the element.
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px -1px 0 0 black;
}
The above css is close, but produces a black 15px wide shadow to the right of the div. How do I contain that?
http://jsfiddle.net/3sjngyk1/
Top border with just a box shadow?
.border-top {
height: 50px;
width: 100px;
box-shadow: 0px -10px 0px 0px red;
margin-top: 25px;
background: lightblue;
}
<div class="border-top"></div>
Alternatively, you can use a pseudo-element and calc (if the border isn't going to be full width - it's not clear from your question).
.border-top {
height: 50px;
width: 100px;
background: lightblue;
position: relative;
margin-top: 25px;
}
.border-top::after {
content: '';
position: absolute;
height: 5px;
bottom: 100%;
left: 15px;
width: calc(100% - 15px);
background: red;
}
<div class="border-top"></div>
How about this?
http://jsfiddle.net/vleong2332/3sjngyk1/2/
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px 0px 0 0 white, 15px -1px 0 0 black;
}
Put another shadow with the same color as the background on top of the black one.
I'm having difficulty getting a div containing text to reduce it's width in order to wrap nicely next to an image that's floated right. The text inside the div is behaving as I would like it to but the grey div is stretching behind the image.
The div/box is part of a wordpress shortcode plugin. I don't know whether that is complicating matters
Here is the css for the elements in question
Image:
.circular-image-right img {
border-radius: 50%;
clear: both;
display: inline;
float: right;
height: 300px;
margin: 0 30px 60px;
width: 300px;
}
Div:
element.style {
text-align: left;
width: 100%;
}
.symple-box.gray {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #DDDDDD;
color: #666666;
}
.symple-box {
-moz-box-sizing: border-box;
border-radius: 2px;
display: block;
font-size: 1em;
margin: 10px 0;
padding: 30px 15px 5px;
}
The page in question can be seen here:
http://c3927181.myzen.co.uk/
http://jsbin.com/iLAMuXoc/5/edit?css,output
.symple-box.gray {
padding: 16px 30px;
margin: 0 360px 0 0;
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #DDDDDD;
color: #666666;
}
I am having an issue with a shadow displaying incorrectly in CSS. It is set to drop on on the bottom and to the right of the box but for whatever reason it is being cut off and I can't work out why.
JS Fiddle
http://jsfiddle.net/jyb5V/
#content {
padding: 0 270px 0 0;
margin-bottom: 50px;
height: 800px;
background-image: url("images/mainbg.jpg");
border:1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
box-shadow: 4px 4px 2px #000000;
}
Website
http://www.debbie.travismoore.co.uk/
Any help is appreciated,
Thanks
Remove overflow: hidden;
#container {
width: 100%;
float: left;
overflow: hidden; // remove this line
}
Demo
I have a fiddle here:
http://jsfiddle.net/45jQm/6/
How do I get the logo portion to be curved also without specifying? Seems this should be possible. Here is the code...
#wrapper {
position: relative;
background-color:rgba(255,255,255,0.5);
width:200px;
min-height: 985px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 10px 0px 10px -7px #333, -10px 0px 10px -7px #333;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.logo {
position: static;
background-color:rgba(0,0,102,0.7);
padding-top: 10px;
}
.logo {
....
border-radius: inherit;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
http://jsfiddle.net/45jQm/11/
Adding the overflow:hidden to the parent div should hide the corners from any child div. No need to add any css to the child div (like the logo in your example).
.parent {
…
border-radius: 5px %* or whatever you choose *%
overflow: hidden;
}
an example: https://jsfiddle.net/uxrzgojh/
This answer is for the future explorers!