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:
Related
Can anyone please tell me how to adjust the height of the scrollbar thumb?
I have tried many different things like
::-webkit-scrollbar-thumb {
height: 10px;
}
::-webkit-scrollbar-thumb {
max-height: 200px;
}
::-webkit-scrollbar-thumb {
margin-top: 10px;
margin-bottom: 10px;
}
I have also read this answer Change scrollbar height and How to change the height of a scrollbar thumb? but it didn't work. Some people in the answers said that it is not possible to change the height on the scrollbar thumb then how this site https://css-tricks.com/custom-scrollbars-in-webkit/ is doing it?
My current code is
body {
height: 110vh;
}
::-webkit-scrollbar {
width: 1rem;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background-color: #3EECAC;
background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
border-radius: 1rem;
}
It's not supported on your browser then:
Ask this:
Are you on firefox?
Does the scrollbar change in stackoverflow: Change scrollbar height
(Do the answers scrollbars change?)
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
h1 {
font-size: 1000px;
}
<h1>Test</h1>
An onClick and hover dropdown menu in pure CSS (no JavaScript) displays the items at first, but the menu doesn't stay open when I put my mouse over the dropdown items (but it does stay open onClick).
Here it is:
.acn-menu {
text-align: center;
background-color: rgba(0, 0, 0, 0.9);
}
.label_openclose {
display: none;
}
.menu-tabs {
height: 100%;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
#media (min-width: 320px) {
.menu-tabs {
position: absolute;
}
}
.menu-tabs .elem {
box-sizing: border-box;
padding: 0 20px;
float: left;
height: 100%;
line-height: 70px;
background-color: rgb(30, 30, 30);
color: white;
}
.menu-check {
display: none;
}
label {
margin-bottom: 0;
}
.label_openclose {
display: inline-block;
width: 60px;
min-height: 50px;
background-color: transparent;
cursor: pointer;
overflow:hidden;
display:block;
}
.menu-tabs .elem {
line-height: initial;
float: initial;
height: 0px;
cursor: pointer;
border-top: 0px solid #000;
overflow: hidden;
}
.menu-check:checked~.menu-tabs .elem {
height: 25px;
color: white;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
.label_openclose:hover~.menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
Here is a fiddle:
https://jsfiddle.net/Lwjvwcva/
You have to add a rule that tells the browser to show .menu-tabs while hovering on it, so I added this rule:
.label_openclose~.menu-tabs:hover .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
check the updated fiddle here.
hope this helps :)
In order for the submenu to remain open, the item where the submenu sits INSIDE needs to be the one selected on hover. In this case .acn-menu or .nav (I used .nav in my code). To make the hover submenu stay open, I removed and added a few lines in the css:
Removed:
.label_openclose:hover~.menu-tabs .elem {
border-top: 2px solid rgba(255, 255, 255, 0.2);
height: 25px;
}
Added:
.nav .menu-tabs {
display:none;
}
.nav:hover .menu-tabs {
display:block;
}
.menu-tabs .elem {
height:25px;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
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>
I have a CSS styling problem: there is a difference between Firefox and Chrome browsers in the CSS styling on an HTML element.
The range element is displayed on a different height in Firefox than in Chrome. I have added two screenshots.
Firefox:
Chrome:
The range element in Chrome is pressed against the upper edge of the "content" div. And in Firefox there is a small space between the range element and the upper edge of the "content" div - as shown by the red mark.
How can I set the range element to the same height in both Firefox and Chrome? In other words: I want the range element to be vertically in the center of the "content" div.
HTML:
<div id="container">
...
<div id="content">
<input type="range" id="bar" min="0" max="100" step="1" value="0"/>
</div>
</div>
CSS:
*{
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
#container {
width: 640px;
height: 372px;
background: #000;
margin: auto;
}
#content {
width: 625px;
height: 25px;
background-color: #333;
margin: auto;
text-align: center;
border-radius: 4px;
}
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 5px;
background: #ddd;
border: none;
border-radius: 0px;
}
input[type=range]::-moz-range-track {
height: 5px;
background: #ddd;
border: none;
border-radius: 0px;
}
to style <input type="range"> properly on all browsers you need to do a lot
1. you need to hide a lot of default browser styles
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;
}
2. then you need to style the track
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
3. then you need to style the thumb
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
sorry copy and paste this - i edited it, now it should work
If I leave out the 5 background-image gradient lines (below), button color successfully changes on hover. But if I leave them in, shadow continues to work on hover but not the background-color. Any ideas?
.buttonlink:link, .buttonlink:visited {
background-color: #557fff; /* For browsers that do not support gradients */
background-image: -moz-linear-gradient(top,#08c,#04c); /* Firefox 3.6-15*/
background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
background-image: -webkit-linear-gradient(top,#08c,#04c); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image: -o-linear-gradient(top,#08c,#04c); /* Opera 11.1-12 */
background-image: linear-gradient(to bottom,#08c,#04c); /* Standard, must be last */
color: white;
width:125px;
height:25px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
display: inline-block;
border: 2px solid #0055ff;
border-radius: 5px;
}
.buttonlink:hover, .buttonlink:active {
background-color: #E2AD27;
box-shadow: 5px 5px 5px #888888;
}
MassDebates kindly created an example that works. I also created an example in jsfiddle and that works too. Is something else in my css file overriding it? Here is the full css:
body {
height: 100%;
line-height: 25px;
font-size: 13px;
}
.infoReset {
border-width: 1px;
border-style: solid;
border-color: #858585;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #FFFFFF;
/**behavior: url(PIE.htc);**/
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-pie-poll: true;
position: relative;
width: 250px;
}
.auditLogSearch {
border-width: 1px;
border-style: solid;
border-color: #858585;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #FFFFFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-pie-poll: true;
position: relative;
width: 100px;
}
#FromDatePicker, #ToDatePicker {
width: 75px;
}
input[type="text"]:FOCUS,input[type="password"]:FOCUS,select:FOCUS,textarea:FOCUS {
border: 1px solid #52A8EC !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px
rgba(82, 168, 236, 0.6);
outline: 0 none;
/**behavior: url(PIE.htc);**/
-pie-poll: true;
position: relative;
}
input[textarea] {
resize: none;
}
#page-wrapper {
width: 800px;
min-width: 800px;
min-height: 500px;
clear: both;
margin: 0 auto;
}
#audit-wrapper {
width: 1000px;
min-width: 1000px;
min-height: 500px;
clear: both;
margin: 0 auto;
}
hr {
border: 2px solid #000;
}
.hidden {
display: none;
}
#auditTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 70%;
}
#auditTable td, #auditTable th {
border: 1px solid #ddd;
text-align: left;
padding: 3px;
}
#auditTable tr:nth-child(even){background-color: #f2f2f2}
#auditTable tr:hover {background-color: #ddd;}
#auditTable th {
padding-top: 8px;
padding-bottom: 8px;
background-color: #4CAF50;
color: white;
}
.buttonlink:link, .buttonlink:visited {
background-color: #557fff; /* For browsers that do not support gradients */
background-image: -moz-linear-gradient(top,#08c,#04c); /* Firefox 3.6-15*/
background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
background-image: -webkit-linear-gradient(top,#08c,#04c); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image: -o-linear-gradient(top,#08c,#04c); /* Opera 11.1-12 */
background-image: linear-gradient(to bottom,#08c,#04c); /* Standard, must be last */
color: white;
width:125px;
height:25px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
display: inline-block;
border: 2px solid #0055ff;
border-radius: 5px;
}
.buttonlink:hover, .buttonlink:active {
background-image: -moz-none;
background-image: -webkit-none;
background-image: -webkit-none;
background-image: -o-none;
background-image:none;
background-color: #E2AD27;
box-shadow: 5px 5px 5px #888888;
}
h2 {
color: #5F489D;
}
Your CSS has no rules to override the previously-set background-image styles. Please consider the following:
.buttonlink:hover, .buttonlink:active {
background-image: -moz-none;
background-image: -webkit-none;
background-image: -webkit-none;
background-image: -o-none;
background-image:none;
background-color: #E2AD27;
box-shadow: 5px 5px 5px #888888;
}
Here's a demo to show you a live example:
http://codepen.io/anon/pen/kXZwdX
This is the simplest, less amount of lines, and easiest solution to your problem:
.buttonlink:hover, .buttonlink:active {
background: #E2AD27;
}