This question already has answers here:
Make scrollbar visible in mobile browsers
(3 answers)
Closed 7 years ago.
Is there a way to keep the scrollbars always visible in mobile browser. By default a scrollable page get its scroll visible only when a touch/swipe is happening. How can I make the scrollbars always visible ?
Try this one on your css styles
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
Related
This question already has answers here:
How do you remove the blue border of an image map?
(2 answers)
Closed 3 years ago.
How can I hide the square border around the button, thanks... and happy new year!
-my code for button
.btn-custom {
border-radius: 20px;
background-image: linear-gradient(to right,yellow,red,yellow);
margin: 13px auto;
padding: 10px;
color: white;
border: hidden;
}
.btn-custom:hover {
background-image: linear-gradient(to right,red,yellow,red);
}
Use the outline property set to none in this way:
.btn-custom{
outline: none;
}
This will remove the blue border
Check this script
.btn-custom {
border: none;
outline: none;
}
I was trying this code below, it's working in all browsers include the IE browser, but the problem scrollbar was hidden in IPad and iPhone Devices & added CSS also for browser-specific still no luck !!!
Does anyone help how to solve this issue?
<object data="your_url_to_pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
It is normal for scrollbars to be hidden on mobile devices. But you can force them to appear by overriding the styles of ::-webkit-scrollbar-* properties.
This answer in another Stack Overflow thread provides an example:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
.button {
font-size: 18px;
font-family: Bradley Hand;
color: purple;
background: rgb(0, 255, 0); /*Default settings for button*/
border: 5px;
width: 100px;
height: 50px;
transition-duration: 0.5s;
border-radius: 10%;
}
.button:hover {
background: rgb(0, 255, 125); /*Changes the buttons size, color,*/
width: 120px; /*and font size*/
height: 60px;
font-size: 22px;
}
<button class = "button">Click me!</button>
I want it to look like you are actually pressing a button. Someone help!
Try and look at this side on w3schools, they got some pretty good code on button animations. https://www.w3schools.com/howto/howto_css_animate_buttons.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive
.button:active { /* your code here */}
I suggest you make it darker when clicked, maybe add a gradient inside so it looks recessed.
Style button when :active different from :hover
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have already found an answer, but I am not sure this is the best approach for my problem. My page has two panels: one sidebar and one content view. I want to have a shadow over the sidebar as if the content view was producing it:
The problem is that my sidebar is a menu with buttons, icons, etc. So if I try to set the (inset) shadow there:
.sidebar {
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
I get:
So, where I have the buttons, they hide the shadow. If I do it the other way so the content view actually produces it:
.content {
box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
I get the shadow along with the content, but if the content is "shorter" than the total height of the screen, the shadow disappears. Similar to the previous case.
My final approach was to set a manual height for the content view or with Javascript, to adapt it to the viewport height. But I am not sure this is the best way to do it. I would like to know if there is a more CSS way to do it, without having to set things manually or getting shadows cut.
EDIT
While creating a fiddle for better understanding my problem I realized that I had a background-color on the buttons. But since I have a hover and a transition on the button, it still hides the shadow. Check it out: http://jsfiddle.net/h3cp59qd/
Check this out: http://jsfiddle.net/h3cp59qd/3/
Use position:absolute for both sidebar and content:
body, html {
background: #D8D8D8;
height: 100%;
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100%;
position: relative;
}
#sidebar {
width: 20%;
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
background: #C8C8C8;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar ul li {
padding-left: 20px;
height: 60px;
text-transform: uppercase;
color: white;
font-weight: 900;
font-size: 12pt;
line-height: 60px;
vertical-align: middle;
}
#sidebar ul li:hover {
background: #c0c0c0;
color: #EEE;
}
#content {
width: 80%;
position: absolute;
z-index: 100;
left: 20%;
top: 0;
bottom: 0;
padding: 0 50px;
box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
just change your background color to gradient:
http://jsfiddle.net/anshalexander/h3cp59qd/2/
background:-webkit-linear-gradient(left, #c0c0c0 0%,#c0c0c0 97%,#555 100%);
You can change the last color to match your shadow color
Maybe just a shadow background image with a repeat-y could do the trick in your css stylesheet.
background-image:url('your-image.jpg');
background-repeat:repeat-y;
Your image should be the shadow 1px height and as larger as you need.
Your header/footer can easily hide the shadow with their proper backgrounds.
EDIT
I saw your edit, here is mine :)
#sidebar ul li:hover {
background-color: #C0C0C0;
color: #EEE;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
There are a few things that need to be corrected. First, remove the padding from #content (it's messing up the width and forcing that div to the bottom).
Add the same box-shadow from #sidebar to your #sidebar ul li:hover style:
#sidebar ul li:hover {
background-color: #C0C0C0;
color: #EEE;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
Then on #app add position: absolute and height: 100%:
#app {
width: 100%;
height: 100%;
position: absolute;
}
Finally, on #sidebar remove min-height: 800px and add height: 100%, and that should fix it right up. See updated fiddle.
You'll notice that this adds a little bit of an edge to the buttons when they're being hovered over. This is due to the blur being greater than the offset. I think it looks good, but it can be fixed by increasing the (absolute values of) x-offset and spread values (the -7s) to greater than the blur-radius (the 9), e.g.:
box-shadow: inset -11px 0 9px -11px rgba(0,0,0,0.7);
This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
How can I change the scroll bar style in css or change the different UI in chrome or any browser. I have seen many sites with different user interfaces.
Can this be done with css or html?
Check here . You can also check this link.
Use css like this
html {
background: lightgrey;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: whitesmoke;
overflow: scroll;
width: 80%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 serif;
border: 1px solid rgba(0,0,0,0.25)
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 0.2em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid red;
}
You can try like this,
body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
One more EXAMPLE with hover effect.
I've just learned with this topic that we can customize scrollbar in CSS3...
But it doesn't seem very efficient in every browser.
What I advise is that you choose (if you can) a jQuery plugin instead. Like http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html .
I often use it. It's very powerful, customizable and interoperable !