This is a simple demo => demo
The odd thing is that scrollbar-track seems to be able to add any attribute except box-shadow,
Unless I add the 'inset' property, but I don't want the 'inset' effect.
This is the style code
.scroll-box {
height: 300px;
overflow: scroll;
overflow-x: hidden;
}
.scroll-box::-webkit-scrollbar {
width: 10px;
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #7d7d7d;
border: 2px solid transparent;
background-clip: content-box;
}
.scroll-box::-webkit-scrollbar-track {
border: 1px solid red;
box-shadow: -4px 0 20px #000;
}
This is html code
<div class="scroll-box">
.............omit
</div>
Expect normal shading
What should I do?
Related
I tried to achieve Shadow effect on the border only like simulated in Adobe XD below
I tested to remove the color of background but it hides the shadow within container
<style>
body {
padding: 30px;
}
.border-shadow {
box-shadow: 1px 1px 5px black;
background-color: transparent;
width: 100px;
padding: 10px;
}
</style>
<div class="border-shadow">
tests
</div>
Is there any css only solution for this? Thank you.
here is an example of achieving your goal!
We use the pseudo-element ::before and blur() effect.
div {
position: relative;
width: 344px;
height: 121px;
border: 2px solid #bed5e6;
border-radius: 2px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 5px;
left: 5px;
border: 5px solid rgba(0,0,0,.07);
border-radius: 2px;
width: 100%;
height: 100%;
filter: blur(4px);
}
<div><h1>Test</h1></div>
You can combine an inset box shadow with a standard one to achieve this look:
#myDiv {
background: transparent;
border: 1px solid skyBlue;
box-shadow: inset 3px 3px 5px rgba(0,0,0,.1), 3px 3px 5px rgba(0,0,0,.1);
height: 100px;
width: 250px;
}
<div id="myDiv">
</div>
Alternatively, you can use the ::after psuedo-element and apply a thicker border and blur as follows:
#mydiv {
background: transparent;
border: 1px solid skyBlue;
height: 100px;
position: relative;
width: 250px;
}
#mydiv::after {
border: 3px solid #ccc;
content: '';
display: block;
filter: blur(2px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="mydiv"></div>
drop-shadow can also do it:
body {
padding: 30px;
}
.border-shadow {
border:1px solid;
filter:drop-shadow(4px 4px 3px red);
background-color: transparent;
width: 100px;
padding: 50px;
}
<div class="border-shadow">
</div>
been working for bout an hour before i posted the question, suprisingly i found the answer just moment after
by using filter css : drop-shadow i can achieve this effect
<style>
body{
padding:30px;
}
.border-shadow{
border:5px solid black;
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
background-color:transparent;
width:100px;
padding:10px;
}
</style>
<div class="border-shadow">
<div class="test-text">
Tests
</div>
</div>
here is the pen
Codepen
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.
I am trying to use bootstrap tagsinput in a form contained in a modal
like this
...
<div class="form-group">
<label for="myTagLabel">Tags:</label>
<input class="form-control" id="myTag" type="text" data-role="tagsinput">
</div>
As you can see in the image above I can't see why the input doesn't have the width of the containing form.
UPDATE
this http://www.bootply.com/f43d1A0YxK reproduces the issue
The reason you are seeing this behaviour is because bootstrap-tagsinput actually hides the original input element, and in its place adds a div. You are seeing a div element styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.
What you want to change is the .bootstrap-tagsinput class:
.bootstrap-tagsinput {
width: 100% !important;
}
Here's a demo: http://www.bootply.com/1iATJfFM69
Add display: block; to the .bootstrap-tagsinput class in your CSS. As noted by Mohamad this class is not present in your own HTML, but when you inspect element/view source you can see that the input is wrapped in a <div class="bootstrap-tagsinput">.
.bootstrap-tagsinput{
display: block;
}
This will overwrite the display: inline-block; that is being inherited.
Bootply Demo
Cristian almost guessed it
somewhere in js:
$('.bootstrap-tagsinput > input').css('width', '');
and in css:
.bootstrap-tagsinput input {
width: 10em;
}
I see the tagsinput plugin you are using comes with its own css file.
bootstrap-tagsinput.css
These css rules are automatically being added to your input when you add the data-role="tagsinput".
.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;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit; //Try change this to 100% !important;
display: block; // Add this in
}
You need to update these so they don't over rule native bootstrap rule.
The reason behind this problem is, the bootstrap-tagsinput class is using display: inline-block;
the solution is, simply change the display: inline-block; to display: block;
Before change
.bootstrap-tagsinput {
display: inline-block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
After change
.bootstrap-tagsinput {
display: block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
The reason you are seeing this behaviour is because the style actually override the width attribute:
style="width: 3em ! important;"
Remove the style:
$('.bootstrap-tagsinput > input').prop( "style", null );
This should work properly.
Additionally, set the desired width with CSS:
.bootstrap-tagsinput input { width:100%!important; }
Is it possible to add padding or margin around the scrollbar item or scrollbar-track? I've tried and can only get padding top/bottom. Adding padding to the UL has no effect on scrollbar. Negative margins on scrollbar have no effect. Ideas? JS Fiddle here.
::-webkit-scrollbar {
width: 12px;
margin:10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px
}
::-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);
You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.
Quoted from how to customise custom scroll?
body {
min-height: 1000px;
font-family: sans-serif;
}
div#container {
height: 200px;
width: 300px;
overflow: scroll;
border-radius: 5px;
margin: 10px;
border: 1px solid #AAAAAA;
}
div#content {
height: 1000px;
outline: none;
padding: 10px;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #AAAAAA;
}
<div id="container">
<div id="content" contenteditable>
Click to type...
</div>
</div>
I created a margin-right effect using border-right on the scrollbar-thumb:
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: red;
border-right: 4px white solid;
background-clip: padding-box;
}
The scrollbar appears to have width 4px and margin-right 4px.
Here's a fiddle as well: https://jsfiddle.net/4kgvL93h/3/
You can add a margin to the scrollbar track;
#someID ::-webkit-scrollbar-track{
border-radius: 15px;
margin: 40px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
This solution make a real space between content and scrollbar (if a scrollable element doesn't have a transparent background). Useful for window scrollbars.
.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
width:16px;
height:16px;
background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
.scroll::-webkit-resizer {background:inherit;
border-right:8px solid rgba(255,255,255,.2); //optional
border-bottom:8px solid rgba(255,255,255,.2); //optional
}
Simply use the margin-block
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 15px;
}
#container{
height:400px;
background-color:white;
overflow-y:scroll;
border-radius:25px;
}
#content{
height:700px;
background-color:yellow;
padding:25px;
}
::-webkit-scrollbar{
width: 5px;
}
/* Track */
::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 25px;
}
/* Handle */
::-webkit-scrollbar-thumb{
background: #8B8B8B;
border-radius: 27px;
border: 4px solid rgba(0, 0, 0, 0);
}
<div id="container">
<div id="content">
<br>
Click to type...
<br>
</div>
</div>
Another important attribute to add vertical or horizontal margin:
::-webkit-scrollbar-track {
margin: 0 30px;
}
With border-radius, neither box-shadow works properly nor does background-clip: padding-box.
I created a parent div on top of the div which needs scrolling. And fixed the height of parent div and put padding right in the child div. That worked well for my case.
<div class="parent h-10 overflow-scroll">
<div class="scroll child pr-2">
<!-- CONTENT -->
</div>
</div>
It's 2013 now and im just wondering if there has come a better way to achieve this? Is there a way to do this with just one element?
div.linetop { border-top: 1px solid #111111; }
div.linebottom { border-top: 1px solid #292929; }
// make a line
<div class="linetop"></div>
<div class="linebottom"></div>
Edit
This is what happens with HR the first pixel is grey :/ (im using chrome btw dont have any other browsers):
Tried both:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
and
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
Edit
Solved it! Simply adding border:none before
hr {
border: none;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
You could use the <hr> tag, and use both border-top and border-bottom:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
The HTML is simply: <hr>.
jsFiddle here.
Possible alternative solutions:
1. CSS gradients - support info
HTML: <div class='v1'></div>
Relevant CSS:
.v1 {
background: linear-gradient(#111 50%, #292929 50%) no-repeat 50% 75%;
background-size: 80% 2px;
}
2. a :before pseudo-element & a box-shadow - support info
HTML: <div class='v2'></div>
Relevant CSS:
.v2 { position: relative; }
.v2:before {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
box-shadow: 0 1px #292929;
background: #111;
content: '';
}
3. :before and :after pseudo-elements - support info
HTML: <div class='v3'></div>
Relevant CSS:
.v3 { position: relative; }
.v3:before, .v3:after {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
background: #111;
content: '';
}
.v3:after { margin-bottom: -1px; background: #292929; }
demo
You can use <hr> tag, and use border-top and border-bottom to define you two lines color:
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #08f;
border-bottom: 1px solid #666;
}
CSS
#hrtag {
border-bottom: green 2px solid;
border-top: red 2px solid;
}
HTML
<hr id="hrtag"/>
If you want it to be a class then just swap the # for . and id for class. In the CSS, you can change the color to whatever you want. This was tested in Chrome.
Would you try box-shadow,like this:
HTML
<div class="hr"></div>
CCS
.hr{
border-top: 1px solid #111;
box-shadow: 0 1px 0 #292929;
}
Please view the demo.