I have make thin scrollbar in Firefox for this css:
scrollbar-width: thin;
scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
it's worked for firefox.
Now i need to make thin scrollbar in chrome.
I have tried this css
*-webkit-scrollbar {
width: 9px;
}
*-webkit-scrollbar-track {
background: transparent;
}
*-webkit-scrollbar-thumb {
background-color: rgba(155, 155, 155, 0.5);
border-radius: 20px;
border: transparent;
}
But this code does not work in chrome.
Any suggestion please.
Try this:-
::-webkit-scrollbar {
width: 9px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(155, 155, 155, 0.5);
border-radius: 20px;
border: transparent;
}
chrome://flags/
Overlay Scrollbars = Enabled
Related
I made a div that has a scroll function. The scroll bars appear on my desktop browsers (chrome, firefox) but when it comes to mobile, the scrollbar isn't visible.
How can I make this visible all the time?
.scroll_text {
max-height: 250px;
overflow-y: scroll;
padding: 0px 0px;
width: 100%;
max-width: 220px;
height: 100%;
}
.scroll_text::-webkit-scrollbar {
width: 8px;
-webkit-width:8px;
-webkit-appearance: none;
}
.scroll_text::-webkit-scrollbar:vertical {
width: 8px;
-webkit-appearance: none;
}
.scroll_text::-webkit-scrollbar-track {
background-color: #DDE2E5;
}
.scroll_text::-webkit-scrollbar-thumb {
background-color: #c99d5e;
border: 1px solid rgba(92, 92, 92, 0.5);
border-radius: 10px;
}
.scroll_text::-webkit-scrollbar-thumb:hover {
background-color: #000;
}
.scroll_text:hover::-webkit-scrollbar-thumb {
background-color: #c99d5e;
border: 1px solid rgba(92, 92, 92, 0.5);
border-radius: 10px;
-webkit-border-radius:10px;
}
This is an OS-specific setting. I'm not sure where it is on iPhone but on MacOS:
I would like to make my scrollbar pass on my table and not let a space between the window.
My overflow-y: scroll is on a div.
https://image.noelshack.com/fichiers/2019/21/5/1558714720-capture.png
My scrollbar css :
::-webkit-scrollbar {
background-color: transparent;
width: 7px;
height: 7px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: transparent;
}
#board::-webkit-scrollbar-track-piece {
background: rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-track:hover {
background-color: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: rgba(186, 186, 192, 0.4);
opacity: 0.4;
border-radius: 16px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(160, 160, 165, 0.85);
}
Do there is a way to do it pls? Seems like it's not really possible with only css but i don't want to use a plugin
Thanks
I have the CSS for the basic design of this rounded box. I have pasted that below. I'm trying to add a blue border with the following design effect (please see image below). Firstly is this possible? If so, any suggestions would be great..
I tried adding just a top border, but it doesn't quite give it the effect i'm looking for.
.contentbox {
border-style: solid;
border-width: 2px;
border-color: rgb(54, 81, 143);
border-radius: 10px;
background-color: rgb(255, 255, 255);
opacity: 0.2;
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
left: 190px;
top: 324px;
width: 100%;
height: 524px;
z-index: 118;
}
This Codepen uses different border widths to create a similar effect to what is pictured in the example.Good luck, and I hope this helps.
html, body {
perspective: 100px;
height: 100%;
width: 100%;
margin: 0;
}
div {
margin: 20px;
border-style: solid;
border-width: 4px 1px 1px 1px;
border-color: rgb(54, 81, 143);
border-top-color: blue;
border-radius: 10px;
background-color: rgb(255, 255, 255);
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
width: 100px;
height: 100px;
}
<div></div>
I was trying to stylize the <progress> HTML element, using a few tricks I picked up online, but I came accross a problem. My CSS should, in theory, set the margin-right and margin-left properties to 10px based on margin: 2px 10px;. However, that is not the case. The <progress> element, which I am trying to style, respects the margin-left, but does not respect the margin-right. Any suggestions?
Code
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 10px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<progress value="450" max="1000"></progress>
You can also check out the relative Codepen I prepared.
Notes
Changing the margin shorthand to individual properties did not make any difference.
Some parts of the CSS stylesheet might be a little bit irrelevant (possibly stuff like the browser-specific styling) or maybe not. I do not exactly know what is causing this problem.
Tested this on Firefox 50 and Chrome 54, same problem in both. I can reproduce the issue both locally and using Codepen and the provided snippet.
You're wrong: it is respecting margin-right. If you use your browser's console/developer tools to inspect the progress bar, you'll see that it does indeed have a margin-right of 10px.
The problem is with width: 100%. A width set to a percentage means "a of containing block's width". You're then adding to that width the margin. So the box that contains your progress bar will be 20px bigger than the containing element would have been, so it will overflow.
Abandon width: 100%: it's rarely necessary. What you want here is width: auto, which for all block elements means "take up as much space as you can within the containing element" and which automatically adjusts for margin.
progress {
display: block;
width: auto;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 0px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div style="position: relative; margin: 0px 50px;">
<progress value="450" max="1000"></progress>
</div>
You could solve it with div parent, which uses margin instead of progress bar.
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 0px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div style="position: relative; margin: 0px 50px;">
<progress value="450" max="1000"></progress>
</div>
You can wrap the progress bar with a div and add padding. See:
.wrapper {
display: block;
background: red;
width: 500px;
padding: 10px;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 14px;
border: 0;
border-radius: 1px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
display: block;
width: 100%;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div class="wrapper">
<progress value="450" max="1000"></progress>
</div>
Apart from all the other ways to solve this, I have also found that using calc() can solve the problem quite easily and without changing but one line from width: 100%; to width: calc(100% - 20px); - some browser-specific prefixing might be required to cover all browsers.
To generalize this solution, replace 20px with the sum of the values of margin-left and margin-right.
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: calc(100% - 20px);
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 10px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<progress value="450" max="1000"></progress>
Could anyone show me some tutorials that make a button in css and doesn't require images? I googled it but everything involved images...
Thanks!
Um, define "button"? If you just want a basic button, you don't even need CSS, just use an HTML input or button tag...
<input type="button" value="Press me!" />
or
<button>Press me!</button>
If I understand you correctly, you want to make an arbitrary element look like a button?
Well ... just write CSS accordingly! Here's a kickoff example which makes a link look like a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3489881</title>
<style>
a.button {
display: inline-block;
padding: 0 2px;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>
<p><a class="button">link</a>
</body>
</html>
This one is kind of dull but gets the trick done!
h1 {
font-family: Arial;
}
a {
display: inline-block;
padding: 2 5px;
background: lightgray;
border: 5px outset lightgray;
cursor: default;
text-decoration:none;
color: black;
}
a:hover {
background: gray;
}
CSS:
.button{
background-color: #000;
color: #FF6600;
font: bolder 1.0em Tahoma;
border: 1px solid Yellow;
padding: 2px;
}
.button:hover{
border: 1px solid Red;
}
HTML:
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>
Try it: http://jsfiddle.net/eD9sf/
There are some awesome examples here - Pure CSS Buttons - of buttons that don't need any images but are legit. I think that you could add some gradients to some of them, but otherwise they looks exactly like the ones on Facebook, Twitter, Wordpress, etc. If you don't know much CSS, I'd suggest that you just copy one of those examples.
This is a very simple design, but looks pretty good
body {
font-family: Helvetica, sans-serif;
font-size: .8rem;
}
.button {
text-align: center;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
.button a {
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
}
/* Second button */
.button-link {
text-align: center;
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button-link:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
<div class="button">Click me</div><br/>
<a class="button-link" href="#">Click me, link only</a>
This one looks lovely, acording to me :)
.button {
color: rgba(255, 255, 255, 1);
background-color: rgba(61, 51, 119, 1);
font-weight: 500;
padding: 9px;
box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
width: 160px;
text-align: center;
transition: all .3s ease;
font-size: 15px;
border: none;
border-radius: 5px;
outline: none;
margin: auto;
font-family: "Century Gothic";
transform: scale(0.9);
}
.button:active {
box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
top: 6px;
transform: scale(0.9) translateY(3px);
}
<input class = 'button' type = 'button' value = 'Click' />