is there any way to hide the scrollbar track but not the thumb? It should look like this:
Its currently looking like this:
This is the actual css for the scrollbar:
*::-webkit-scrollbar {
width: 10px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
background-color: var(--dark-blue) ;
border-radius: 20px;
border: 3px solid var(--custom-white);
}
FINAL CODE:
*::-webkit-scrollbar {
background-color: transparent;
width: 15px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 4px solid transparent;
background-color: rgba(0,0,0,0.2);
background-clip: content-box;
}
Just add overflow: overlay; to the body tag instead of overflow: auto.
both work the same but with OVERLAY your scrollbar will be on top of content just as you want.
Worked for me.
You can just add the background-color property to your ::-webkit-scrollbar and set it to transparent.
::-webkit-scrollbar {
background-color: transparent;
width: 10px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
background-color: var(--dark-blue) ;
border-radius: 20px;
border: 3px solid var(--custom-white);
}
Alright, since i tried everything with CSS and nothing worked, i figured it would be best to use an external package that helped me achieve this very very easily.
I used this library which is suuper super easy to set up and use. All i had to do was install it and use the component. In the wiki they have an example of use and its very noob-friendly and customizable.
*::-webkit-scrollbar {
border: none;
background-color: transparent;
} /* webkit browsers(safari, chrome) */
*{
scrollbar-color: #404040b3 transparent; /*firefox*/
}
This is what worked for me finally.
Related
<div className="text-edit">
<textarea
maxLength={200}
autoFocus
onChange={(e) => {}}
/>
</div>
.text-edit {
textarea {
box-sizing: border-box;
min-height: 100px;
font-size: 1.5rem;
width: 100%;
padding: 10px;
border-radius: 5px;
border: none; // var(--border);
resize: vertical;
color: var(--text-color);
background: var(--text-back-color);
&:focus {
outline: none;
}
// I even tried tweaking it manually
&::-webkit-resizer {
border-width: 10px;
border-style: solid;
border-color: transparent red red transparent;
}
}
}
Is there anything wrong with the code that would cause this? Everything works fine on the browser.
On mobile chrome the resizer becomes a small speak and cannot be dragged.
I have a custom scrollbar style for Chrome on a div. When both scrollbars show, a white square appears on the right lower corner.
<div class="scrollbox" id='a'>
</div>
body {
background: black;
}
div {
height: 100px;
width: 200px;
margin: 0 auto;
overflow: auto;
background: black;
color: white;
}
.scrollbox:hover::-webkit-scrollbar-thumb:hover {
background-color: #888;
}
.scrollbox:hover::-webkit-scrollbar-thumb {
visibility : visible;
background-color: #666;
border-radius: 4px;
}
.scrollbox:hover::-webkit-scrollbar {
background-color: #222;
border-radius: 4px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
var a=document.getElementById('a');
for(var i=0; i<10; i++) {
a.innerHTML+='<br>'+i + ' aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
}
Here is the repro code:
https://codepen.io/nosachamos/pen/xxLOryr
Looks like this:
How can I make this black so that it won't appear?
Give this a try:
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
Anything with an alpha of 0 should be invisible, but you can set it to black or a different colour if you please. Tested on Chrome on your Codepen and is working great!
Today I was trying to create a card in HTML/CSS with hidden border which appears after hovering on a card. I came up with this code, which works fine for me:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
I just want to know if there isn't any better way of doing this. This works fine since I don't need to animate it, but is this a proper way of hiding border or not? Thanks for Your answers.
EDIT: I think I should edit my question since I don't want to use box-sizing: border-box property. I'd like to hide my border with "content-box". And here border: none won't work.
Your solution is the right way to handle this problem.
Others have commented that to hide the border you should use border: 0px or border: none but with that method you have the problem that when the box is hovered, the width of the element changes making it, not only ugly to look at, but hard to predict what the width will be, and how it can affect adjacent elements.
I would use exactly the same method you have used.
You can also adjust the background-clip to avoid the border to overlap the background:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
background-clip:padding-box;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
To hide border use border:none instead border: 5px solid rgba(0,0,0,0);
When you use border: 5px solid rgba(0,0,0,0); means you apply border but with transparent color.
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: none;
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
.card{
border: 0px solid black;
}
.card:hover{
border: 5px solid black;
}
I think that is your solve
Is it possible to change the style of a vertical scrollbar? I would like to remove both arrows up and down.
<div class="msg-container-base">
<message
*ngFor="let message of thread.messages | async"
[message]="message">
</message>
</div>
.msg-container-base {
border: 1px solid #ddd;
background: white;
overflow-x: hidden;
}
It is not recommended to play with the style of scrollbars because it has very bad portability (IE and Firefox won't support it), but if you still want to go that way, here is a jsfiddle on how to play with the webkit style for the scrollbar
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 2px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 2px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: darkgrey;
}
You can do it but it only works on webkit browsers for now.
Alternatively, you could do the job with JQuery plugins.
Here's a way to do style your scrollbar with CSS:
::-webkit-scrollbar-track {
background-color: #b46868;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
background-color: #7c2929;
}
::-webkit-scrollbar-corner {
background-color: black;
}
I'm trying to do some basic styling in an html range input with the follow:
HTML
<input type="range" min="0" value="50" max="100" step="1" />
CSS
input[type=range]::-webkit-slider-thumb {
-webkit-appearance : none;
background : red;
height : 20px;
width : 20px;
}
I also made a Codepen you can look at.
You'll notice that if you comment out the background, height and width styles the thumb does dissapear. So something is working. But with the styles applied I'd expect it to be a 20px X 20px red square. But alas, I just see the default thumb styling.
Please check with the below answer
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type=range] {
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 300px;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
background: #ccc;
}
/* for ie */
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
<input type="range" min="0" value="50" max="100" step="1" />
If you are able to edit the track, but NOT the thumb, then be sure that you have -webkit-appearance: none; in these two places to override default behavior.
input[type=range] {
-webkit-appearance: none; <------------------------------------ REQUIRED
}
input[type=range]::-webkit-slider-runnable-track {
background: /* ...change color with background property... */;
/* ...my custom edits...*/
}
input[type=range]:hover::-webkit-slider-runnable-track {
background: /* ...change color with background property... */;
/* ...my custom edits... */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; <------------------------------------ REQUIRED
height: /* ..manually set height greater than 0... */ <-------- REQUIRED
width: /* ..manually set width greater than 0... */ <---------- REQUIRED
background: /* ...change color with background property... */;
/* ...my custom edits... */
}
input[type=range]:hover::-webkit-slider-thumb {
background: /* ...change color with background property... */;
/* ...my custom edits... */
}
(Note that this works in Chrome, but you can comma separate other properties like input[type=range]::-moz-range-thumb and input[type=range]::-ms-thumb as needed to account for other browsers)
It would seem the following selector is causing the issue and your styles aren't working because of that, please remove it and the styles will apply:
::-webkit-slider-thumb
Here is an updated Codepen.
Updated Answer
Several styles need to be applied to range inputs in all browsers to override their basic appearance. After declaring the below styles you will be able to style the range toggler.
Please see the below and add it to your code:
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
Please see this link to the updated Codepen.
So the issue why the styles didn't get applied to the thumb is that you also have to add
input[type=range] {
-webkit-appearance: none;
}
.. The thumb is now a red square.
Hide the input - this hides thumb and track
Style the thumb as you'd like
Style the track
caveat: the track aligns with the top of the thumb. I used a negative margin to correct this. If someone has a better way of doing this that would be nice...
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: red;
height: 20px;
width: 20px;
margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
}
<input type="range" min="0" value="50" max="100" step="1" />
CODEPEN
Good resource here for ensuring browser compatibility.