:root{
--errorColor: #ff665d;
}
::-webkit-scrollbar-thumb {
/* --errorColor is not defined */
background-color: rgba(var(--errorColor), 0.8);
}
demo: https://codepen.io/ZeronoFreya/pen/VwBQarJ
What should I do?
Thank you for your help, I am a little confused about the syntax of scss and css
Don't believe everything you read!
--errorColor is defined, but it seems that the changing of background in that pseudo element does not work unless the scrollbar is set to auto (I haven't yet found a definitive reference for this). You could test this out without use of a CSS variable, e.g. try setting with background-color: red.
However, you have another problem which is that the format for the background-color isn't going to work with that hex code color (see answer from #BernardBorg) so use an rgb setting instead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--errorColor: #ff665d;
--errorColor: 255, 102, 93;
}
div {
width: 300px;
height: 300px;
border: 1px red solid;
overflow: auto;
}
::-webkit-scrollbar-thumb {
background-color: rgba(var(--errorColor), 0.8);
}
::-webkit-scrollbar {
overflow: auto;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
let div = document.querySelector("#div")
let str = ""
for (let i = 0; i < 100; i++) {
str += `<p>${i}</p>`
}
div.innerHTML = str
</script>
</body>
</html>
rgba(hexcode, 0.8) is invalid CSS. You could do the following instead;
:root{
--errorColor: 255, 102, 93;
}
::-webkit-scrollbar-thumb {
background-color: rgba(var(--errorColor), 0.8);
}
Source
I spent a while trying to figure out why the background-color wasn't getting applied to the scrollbar thumb, but it seems someone else has figured it out before me. Please refer to #AHaworth's answer and #TemaniAfif's comment on his answer
(setting appearance: none or overflow: auto on ::webkit-scrollbar)
Extra note: if you want the colour to only apply to the div's scrollbar you can do
#div::-webkit-scrollbar {
appearance: none;
}
#div::-webkit-scrollbar-thumb {
background-color: rgba(var(-errorColor), 0.8);
}
Related
I am trying to show the horizontal scrollbar for my overflow by default, but in chrome + macos, it doesn't seem to be working. In Safari it works just fine.
the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
content that goes brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
</div>
</body>
</html>
the css (inline via style), on the parent container:
display: block;
width: 100px;
overflow: scroll
The screenshot:
If I manually click the box and slide...the scrollbar appears, but it's not the desired functionality.
This solution/hack seems to work for Chrome/Safari on Mac:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}
::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
So scrollbars are an OS and and application level setting depending on what you're using.
On mac I think you can turn them on and off for system screens, on chrome you used to be able to turn them on and off, but when I just went looking for the setting I couldn't find it in the latest version of chrome.
Unfortunately, beyond adding overflow: scroll to a div you have no other control over whether or not a scroll bar appears, and even if you get it to appear for yourself, there's zero guarantee that it will appear for your users.
You can check out this video of a guy changing his own Chrome settings (https://www.youtube.com/watch?v=VTLHxboMivM) but like I say, I just had a look in the current version and couldn't see it.
I'm using the CSS vw property in a page to give a <div> 50% page width (this is just an example). Here is the code:
*
{
/* Zero padding/margin by default. */
margin: 0;
padding: 0;
/* Fix CSS. */
box-sizing: border-box;
}
#left
{
left: 0;
width: 50vw; /* SHOULD BE 50% WIDTH! */
margin: auto;
padding: 0;
top: 50px;
bottom: 50px;
position: absolute;
background: #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
<center>|</center>
<div id="left"></div>
</body>
</html>
There is a red box that should take up the left half of the page (halfway indicated by the |). It works fine normally, but when you set desktop scaling on Windows to 125% (default is 100%) it doesn't work in IE9. With desktop scaling at 125% it looks correct in Firefox:
And incorrect in IE9:
My question is: does anyone know of a workaround for this?
This is the setting that causes the problem (Windows 7):
See edit below.
I came up with a vaguely clean solution. Fortunately Windows only supports a few values of desktop scaling: 100%, 125%, 150% in Windows 7, and 200% in Windows 8 (or 8.1? I don't remember). And even more fortunately, it reports the correct relative-to-96 DPI via CSS media queries. All in all it means you can do this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
*
{
/* Zero padding/margin by default. */
margin: 0;
padding: 0;
/* Fix CSS. */
box-sizing: border-box;
}
#left
{
left: 0;
width: 50vw;
margin: auto;
padding: 0;
top: 50px;
bottom: 50px;
position: absolute;
background: #f00;
}
</style>
<!--[if IE]>
<style>
/* Windows 125% scale. */
#media (resolution: 120dpi) {
#left {
width: 40vw; /* 50 / 1.25 */
}
}
/* Windows 150% scale. */
#media (resolution: 144dpi) {
#left {
width: 33.333vw; /* 50 / 1.5 */
}
}
/* Windows 200% scale. */
#media (resolution: 192dpi) {
#left {
width: 25vw; /* 50 / 2 */
}
}
</style>
<![endif]-->
</head>
<body>
<center>|</center>
<div id="left"></div>
</body>
</html>
Quite hacky, but not too bad, and it works perfectly. It does mean you have to calculate multiples of all your vw and vh values though.
Edit
As noted in the comments, it works fine unless you zoom with the mouse wheel as well as have desktop scaling on. Frankly, IE9 is fucked. I ended up going with this javascript which doesn't work perfectly still:
<script>
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
for (var i = 0; i < document.styleSheets.length; ++i) {
var factor = screen.systemXDPI / screen.logicalXDPI;
var rules = document.styleSheets[i].cssRules;
for (var j = 0; j < rules.length; ++j) {
var style = rules[j].style;
for (var k = 0; k < style.length; ++k) {
// This is weird I know.
// Change style names from 'max-height' to 'maxHeight'.
styleName = style[k].replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
if (style[styleName] != undefined) {
// Replace vw and vh's.
newVal = style[styleName].replace(/([.0-9]+)(v[wh])/g, function(str, num, unit) {
return (parseFloat(num) / factor) + unit;
});
if (style[styleName] != newVal) {
style[styleName] = newVal;
}
}
}
}
}
</script>
I want to css sprite (sprite image total width:45px and total height:15px consists of three image ) but there is a problem in IE9/8/7. link and hover work but when click the button (active) sprite image slipping to left 1px. issue for only IE 9/8/7.How can I fix this?
CSS:
body{
margin:0;
padding:0;
}
.button{
background:url(sprite-image.png) no-repeat 0 0;
width:15px;
height:15px;
cursor:pointer;
}
.button:hover{
background:url(sprite-image.png) no-repeat -15px 0;
}
.button:active{
background:url(sprite-image.png) no-repeat -30px 0;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
HTML:
<body>
<div class="cont">
<div class="button"> </div>
</div>
</body>
"link" and "hover" and "active" FF,Chrome,Safari,Opera like this;
but IE 9/8/7 active look like this;
I concretized above images to make it look better . My sprite image;
Why not use IE-conditional comments;
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
And then write eg CSS-rules like .lt-ie9 .someclass{}to target a IE-version. I use them to fix some IE-specific css-stuff. No dirty hacks, no hastle just css. Did you check with eg Firebug Lite what happens?! outline: 0 none?
Add a Internet explorer specific stylesheet to the <head></head> section.
<!--[if lt IE 9]>
<link rel="stylesheet type="text/css" href="/css/ie.css" />
<![endif]-->
and in ie.css do something like:
.button:active{
background:url(sprite-image.png) no-repeat -29px 0 !important;
}
(There's Always an issue with ie , phew !)
I created a fake sprite using your graphic to see what you are seeing but looking good in my fiddle in all IE 7-9 (note i just change positioning and made it construsive (less):
http://jsfiddle.net/Riskbreaker/Rr8p2/
body{
margin:0;
padding:0;
}
.button{
background:url(images/sprite.png) no-repeat 0 0;
width:14px;
height:15px;
cursor:pointer;
}
.button:hover{
background-position:0px -27px;
}
.button:active{
background-position:0px -27px;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
Remember the positioning I made up so you can adjust. I never had the active IE issue before...but let me know what you are seeing....if the issue persist and you don't want another file then do this:
IE7: *.button:active{background-position:0px -28px;} (or whatever the correct position is )...
IE8: .button:active{background-position:0px -28px\9;}.........
IE9....not sure your latest but it should not have any issues (latest)
I have faced similar issues with IE8 before but IE9 worked fine in my case (not sure about IE7 but it must be like IE8 for this thing).
It can be resolved/improved by one of these 2 approaches:
1) Modify the image (maybe in resolution, color combination etc.) and try if it works. Why this might work? Because in your example, IE appears trying to do some image manipulations "intelligently" which unfortunately go wrong at times (especially for small images/pixel perfect cases) and you can just hope that it doesn't fail badly for your new images.
2) Use background-position accuracy of 0.5px units.
Note "background-position: -15.5px 0;" in the following code. This solution will reduce your frustration by at least 50% :-) I am afraid that you might need to provide IE specific CSS for this solution but that should be fine ... You can add the browser identifier class name on tag using JavaScript or with technique mentioned # http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ and then use those class names when you write browser specific CSS.
The solution:
.button {
background:url(images/sprite.png) no-repeat 0 0;
width: 15px;
height: 15px;
cursor:pointer;
}
.button:hover {
background-position: -15.5px 0;
}
.button:active {
background-position: -30px 0;
}
.cont {
width: 200px;
height: 200px;
float: left;
margin: 50px 0 0 100px;
}
You can use below trick which will help to give manual value
For IE7 (underscore before the value)
.button:hover {
background-position: _-15.5px 0;
}
Or
IE-7 & IE-8(need to add\9)
.button:hover {
background-position: -15.5px\9;
}
For IE8only (\0/)
*+.button:hover {
background-position: -15.5px\0/;
}
Try this change in css:
.button{
background: url(sprite-image.png) no-repeat left 0;
width: 15px;
height: 15px;
cursor: pointer;
}
.button:hover{
background: url(sprite-image.png) no-repeat center 0;
}
.button:active{
background: url(sprite-image.png) no-repeat right 0;
}
I created a beautiful faux legend for a box that surrounds some text: jsfiddle. However, my solution uses :before and :after pseudo classes, which won't work in IE 7 and IE 8. Bummer.
So I decided I would set out to try to define my own spans to use in the place of the :before and :after pseudo classes. Unfortunately, my solution seems to work for the :before replacement, but not the :after replacement: jsfiddle. Also, the contents of the box have been shifted upwards for some inexplicable reason.
Is it possible to accomplish what I am doing through CSS and HTML alone? I don't want to bring any Javascript or jQuery into the mix.
Thanks!
http://www.webdevout.net/test?01&raw:
<!doctype html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
background: #ff3366;
font: 16px serif;
}
fieldset {
border: 3px solid #ffc2d1;
}
legend {
background: url(http://img820.imageshack.us/img820/4242/spritearrowdown.png) no-repeat 3px 50%;
padding: 0 0 0 13px;
}
html > /**/ body
legend { /* if the way it looks in IE8 really bothers you: */
position: relative;
right: -13px;
}
</style>
</head>
<body>
<form action="foo">
<fieldset>
<legend>Model Forecast Guidance</legend>
Fieldset
</fieldset>
</form>
</body>
</html>
Can someone else take a look at this code and either confirm that this is an IE9 bug or tell me what I am doing wrong? With the following HTML code. The bottom border of the button will render the same color as the text even though a border color of red is defined. IE8 and every other browser on the planet renders this OK. Make sure that IE9 is rendering in standards mode.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button.button {
color: blue;
border: 0px;
border-bottom: #FF0000 2px solid;
}
</style>
</head>
<body>
<button type="button" class="button">Update</button>
</body>
</html>
So far the only fix I've found for this is to redeclare a border color for all sides at the bottom of the style.
border-color: #FF0000;
dont know it if helps checked it out its fine for me
use this
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
border:0;
}
.update {
color: blue;
border-bottom: 2px #FF0000 solid;
display: block;
outline:none;
}
</style>
</head>
<body>
<button type="button" class="update">Update</button>
</body>
</html>
and if you accept my opinion, dont use tag names as class name