I'm attempting to style the thumb of the default scrollbar in vue (black background so no way of seeing the default currently) I've tried all of the following and there's been no difference
main::-webkit-scrollbar-thumb {
border-radius: 2px;
/* background-color: rgba(0,0,0,.5); */
background-color: #00FF01;
color: #00FF01;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
body::-webkit-scrollbar-thumb {
border-radius: 2px;
/* background-color: rgba(0,0,0,.5); */
background-color: #00FF01;
color: #00FF01;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
/* background-color: rgba(0,0,0,.5); */
background-color: #00FF01;
color: #00FF01;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Is the implementation of webkit different?
all of the ::webkit-scrollbar-* pseudo-elements can only work if at least 1 CSS attribute is defined in the "entire scrollbar" pseudo-element ::webkit-scrollbar
Try them together:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
/* background-color: rgba(0,0,0,.5); */
background-color: #00FF01;
color: #00FF01;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Related
Look at the edges. I been trying to fix this for two days now, throw at it everything everywhere. The problem is when the scrollbar appears this happens. Note it's the same when scrollbar is unstyled. What do you think?
Styled component code:
padding: 6px;
resize: none;
font-family: inherit;
font-size: inherit;
background-color: #e4e4e4;
color: black;
outline: none;
border: none;
&:focus {
outline: none;
border: none;
box-shadow: 0 0 0 2px #2d8cff;
background-color: ${Colors.primary};
}
& {
::-webkit-scrollbar {
width: 16px;
cursor: initial;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: inset 0 0 10px 10px #c1c1c1;
border: solid 4px transparent;
cursor: initial;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 10px 10px #7d7d7d;
}
}
I fixed this using box-sizing: border-box and using border instead of boxshadow. In border then has to be specified in not focus state too, to the same color as background.
My question makes more sense with a picture.
.instagram {
color: #E44060;
font-size: 1.5em;
padding: 12px 14px 12px 14px;
border: 2px solid #E44060;
border-radius: 7px;
&:visited {
color: inherit;
}
&:hover {
color: $tertiary-color;
background-color: #E44060;
transition: all .25s ease 0s;
}
&:active {
background-color: #B2334C;
border: 2px solid rgba(0,0,0,0.2);
box-shadow: inset 4px 4px rgba(0,0,0,0.2), inset -4px -4px rgba(0,0,0,0.2);
}
}
How do I make it so the corners of the box-shadow don't overlap making the opacity 0.4? Should I try to create a button using a different method?
Use boxshadow and transform to create the push button effect
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<button class="button">Instagram</button>
Rather than having 2 box-shadows, you could use the "spread" feature (the 4th number after "inset").
box-shadow: inset 0 0 0 4px rgba(0,0,0,0.2);
https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp
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);
}
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'm trying add hover, active state to custom back button. custom data-theme is "app-ios" Here is the
`
<div data-role="page" id="main">
<div data-theme="c" data-role="header">
<h3>
Header
</h3>
<a data-role="button" data-rel="back" data-icon="arrow-l" data-theme="app-ios">Back</a>
</div>
<div data-role="content"></div
</div>
`
CSS
/* button background and borders color */
a[data-theme="app-ios"] {
border: none;
}
a[data-theme="app-ios"] .ui-btn-corner-all {
border: 1px solid rgba(0,0,0, 0.4);
-webkit-border-radius: 5px;
background: #ba2669; /* Old browsers */
-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
overflow: visible;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* shadows and label color */
/* button background and borders color */
a[data-theme="app-ios"] {
border: none;
}
a[data-theme="app-ios"] .ui-btn-corner-all {
border: 1px solid rgba(0,0,0, 0.4);
-webkit-border-radius: 5px;
background: #ba2669;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
overflow: visible;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* shadows and label color */
a[data-theme="app-ios"].ui-shadow,
a[data-theme="app-ios"] {
box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;
background-clip: none; -webkit-background-clip: none; -moz-background-clip: none;
color: white;
font-weight: bold;
font-size: 12px!important;
text-transform: uppercase;
top: 5px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
width: 51px;
}
/* make room for the point */
a[data-theme="app-ios"].ui-btn-left {
left: 14px;
}
a[data-theme="app-ios"].ui-btn-left .ui-btn-corner-all {
padding-left: 5px !important;
}
/* position the DIV that contains the point */
a[data-theme="app-ios"] .ios-tip {
float: left;
left: -10px;
top: 6px;
position: absolute;
-webkit-transform: scale(.7, 1.0);
}
/* apply gradient */
a[data-theme="app-ios"] .ios-tip span {
display: block;
width: 19px;
height: 18px;
border: 2px solid rgba(0,0,0, 0.4);
border-right: 0;
border-top: 0;
/* the gradient color mus be slightly different since the point is within the body of the button */
background: #ba2669; /* Old browsers */
border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px;
/*box-shadow: 0 1px 0 rgba(255,255,255, 0.25); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25); -moz-box-shadow: 0 1px 0 rgba(255,255,255, 0.25);*/
-webkit-transform: rotate(45deg) scale(.9, .9);
}