I have datapicker like this http://pokit.org/get/?fec9e8af4aa6af07f290705fff6a5769.jpg
This is my code
#ui-datepicker-div:before{
content: '';
position: absolute;
display: block;
left: 15px;
top:-9px;
width: 0;
height: 0;
border-left: 9px solid rgba(0,0,0,0.01);
border-right: 9px solid rgba(0,0,0,0.01);
border-bottom: 9px solid rgba(0,0,0,0.01) !important;
overflow: hidden;
}
Border is white and not visible on white background if I put border-bottom: 9px solid #ddd. Background of caret has color #ddd.
I need only border like on datapicker in image.
Related
So I have to do tabs and I done them by creating triangles with pseudo-elements that were made with the help of borders and applied a filter: drop-shadow to them to show borders to border. In 100% zoom, everything is fine, but if you zooming out it, the borders with pseudo-elements disappers, and if you zooming in it, they collapse. What can you advise to solve this problem?
.tab {
display: flex;
font-size: 14px;
align-items: center;
position: relative;
margin-left: 40px;
height: 34px;
bottom: -6px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #f0f0f0;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
.tab:before {
content: '';
left: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
transform: rotateY(180deg);
transform-origin: bottom;
}
.tab:after {
content: '';
right: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
}
<div class="tab"><a>tab1</a></div>
Link to fiddle: https://jsfiddle.net/Lkehqg0j/12
I design an arrow top of an ul box menu like this picture:
You can see, I set a border around of box:
border: .1rem solid rgba(228,234,248,.5);
but Is there a way to set a border around of arrow?
.mega-dropdown-menu:before {
content: "";
border-bottom: 8px solid #fbfbfb;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
position: absolute;
top: -7px;
left: 13.1rem;
z-index: 10;
}
Well, no ways to set a border around the arrow as the triangle you made is itself a border. But there's a solution, you can overlay the triangles on each other like, this will give you a border effect around your triangle.
div {
position: relative;
/* make sure you use this else your elements will fly in the wild */
}
div:before {
content: "";
border-bottom: 10px solid #aaa;
border-right: 11px solid transparent;
border-left: 11px solid transparent;
position: absolute;
left: -2px;
top: -2px;
}
div:after {
content: "";
border-bottom: 8px solid #ddd;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
position: absolute;
}
<div></div>
I am trying to draw a triangle in css which contain only borders. no background colors.
.arrow {
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 20px solid #000;
height: 0;
width: 0px;
}
The above code gives me a triangle with #000 as background colors. i just want the triangle borders.
.arrow:after {
content: '\25c1';
display: inline-block;
}
Fiddle
I am using ::-webkit-scrollbar to make a custom scrollbar in Chrome. I have a border-radius: 10px and in doing that, there are white corners at the top:
Sorry, it's kinda hard to see since it's a scrollbar.
I want the corners to be the same color as the header div (#dadae3). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?
CSS (entire):
body {
padding: 0;
margin: 0
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb {
background: #dadae3;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb:hover {
background: #c4c4cc
}
::-webkit-scrollbar-thumb:active {
background: #aeaeb5
}
HTML:
<div style='background: #dadae3; width: 100%; height: 30px;'></div>
<div style='width: 100%; height: 1000px'></div>
You have to set the ::-webkit-scrollbar-corner pseudo-element, e.g.
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
You can set the background-color property for the pseudo-element -webkit-scrollbar, doing that you can set the "corner color".
I was fighting this scrollbar-corner today, which takes space and creates unneeded gap. If I use overflow: auto on container this scrollbar corner completely disappears while scrollbar itself remains visible.
I had to customize webkit-scrollbar-corner as colored triangle instead of square.
Here is the result how to do it. With border trick.
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}
Try with this
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}
I can figure out how to do this. This topic help me out: adding the arrow to dropdown pills for twitter bootstrap?
By adding
.dropdown-menu::after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
border-left: 8px solid transparent;
content: '';
}
I was able to get the arrow show. However, there is no border around the top of arrow so it just looks like a gap in the dropdown now. does anyone know how to add the border to the up arrow?
Add a rule for border-top. Something like
border-top: 8px solid white;
solved by adding following markup:
.savedsearchWrapper .dropdown-menu:after {
position: absolute;
top: -6px;
left: 23px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.advancedSearchDropDown .dropdown-menu:before {
position: absolute;
top: -7px;
left: 17px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
Those are bootstrap styles but the selector was too specific for my implementation.