I have added a webkit-scrollbar to my Jekyll blog. I am using this code in my css:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
height: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: rgba(253,206,147,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
It works great but on iOS Safari there appears to be a very thin line left behind the scroll bar. Here is the original view:
Now look to the left of the scroll bar, and you can see a very thin line the same width as the actual scroll bar:
Why is this happening? Is there a way to fix it? Any suggestions would be great!
Nothing more than a rendering artifact from your:
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
Shadow enabled:
Shadow disabled:
Related
Hey is it possible to make scrollbar "hidden" i dont wanna use overflow-y: hidden
just something like background: transparent or something like that
Here you will find a description how to hide the scrollbar just with CSS.
And here in the second example you will find a solution how to hide the scrollbar within a div for example.
The trick in the second example is to define a wider div container that the surrounding one.
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
Just play arround with the values of margin and padding.
There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:
.element::-webkit-scrollbar { width: 0 !important }
u can change width / background-color and other properties .
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
this css code might work
In Webkit browsers:
::-webkit-scrollbar {
display: none;
}
I'm attempting to customize a WordPress theme.
Starting theme: http://elegantthemes.com/preview/Nexus/
I've gotten nearly where I want to in Chrome:
https://dl.dropboxusercontent.com/u/20040939/HeaderChrome.png
In Firefox, the images in the header are not lining up:
https://dl.dropboxusercontent.com/u/20040939/HeaderFF.png
In both browsers, there is an annoying border/shadow at the top of the page (see highlight area in Chrome screenshot above).
Live site is here:
http://makeminepop.com/
Any assistance is appreciated.
The "annoying shadow" is coming from the social links that you are not currently using on line 109 of style.css:
#et-social-icons {
/* float: right; */
/* width: 245px; */
background-color: #f6f6f6;
-moz-box-shadow: inset 0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff, -1px 0 0 #fff;
position: relative;
}
Update:
I believe it is the nav element that is throwing off the image alignment. Try editing the following on line 104 of style.css
#top-navigation nav {
overflow:hidden; <-- add this
float: none; <-- modify this
}
this shadow was generated from #et-social-icons class. Just set the display:none to this class.
You can find the class in line:109 of the following css file.
http://makeminepop.com/wp-content/themes/Nexus/style.css?ver=4.3
Hope this help.
I've achieved the desired design for the scrollbar using the following:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 8px;
background-color: #999;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #666;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
As it can be seen above the changes are of course not for Internet Explorer, where I could just do for the moment the following:
body {
-ms-scrollbar-base-color: #999;
-ms-scrollbar-track-color: #999;
-ms-scrollbar-face-color: #666;
-ms-scrollbar-arrow-color: #999;
}
I want to know if is possible to recreate the same design present on Chrome in IE. Below are printscreens with the scrollbar, first from Chrome, second from Internet Explorer.
Unfortunatelly there is no cross browser way to style scrollbar with CSS. But you can try next JavaScript custom scrollbar plugins (mostly jQuery): jQuery Scrollbar, jScrollPane, mCustomScrollbar, perfect-scrollbar, slimScroll, baron or NiceScroll. There are more custom scrollbars available, but they are less functional/well-known.
I have use this : http://jscrollpane.kelvinluck.com/ this work on IE and it is very easy to use :) Enjoy !
I am facing a CSS issue in IE 10 (Document Mode : IE 7 Standard). I am getting multiple border in my dropdown list while setting background color. As shown in screen shot :
Extra border is coming on top and left. I have already tried border:none, border:0, outline:none, outline:0, border:transparent etc. but none of them works for me.
Edit : I am facing this issue only when I am adding background-color to dropdown list.
OK, I got the solution for removing border. According to this Link add span as a wrapper and after some CSS manipulation things are working fine for me.
Here what I did in my code :
span.dropdown {
float: left;
overflow: hidden;
border: 1px solid #ccc;
height:20px;
}
select {
background: none;
border: none;
color: #575652;
float: left;
outline: none;
text-align: left;
text-decoration: none;
padding:6px 2px 6px 2px!important;
display:block;height:23px;
}
span.dropdown select {
margin: -2px -3px -3px -2px ;
}
and in HTML :
<span class="dropdown">
...
//dropdown code
...
</span>
Unfortunately IE10 doesn't let you remove the border on a dropdown menu.
Edit:
Untested but try style="border-style:none;
also untested, try border: none !important;
in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;
I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?
I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.
jQuery:
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
CSS:
.fakeInput {
display: block;
width:0;
height:0;
top: -999rem;
position: absolute;
}
Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.
IE has its own CSS pseudo-element to deal with this highlight.
CSS:
select::-ms-value{ background-color: transparent; color: black; }
You may read more about this on this page.
it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.
Thought I add it as an answer if somebody comes back with the issue.
:focus{outline: none;}