Css remove the bounce effect - html

I am having the following problem on firefox macOs.
I solved the Chrome problem by putting this in the body:
body {
overscroll-behavior-y: none;
}
Can you give me a hand?

Try to use overscroll-behavior: none; instead of overscroll-behavior-y: none; as stated here.
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior?retiredLocale=de

Related

Scrollbar isn't showing up in the website

The scroll bar isn't showing up in the website even after putting
{
overflow-y:scroll;
}
in the body or html css
Link
Would be glad if some one could help me on this
Check your style.css and remove these lines. Other than that it works fine on non-webkit browsers
I hope it helps...
in your styles.css comment this code to make scrollbar visible on chrome
body::-webkit-scrollbar {
/* display: none; */
}

Black checkboxes on IOS browsers

I'm having trouble fixing one issue with checkbox on IOS browsers. I always get a black check icon with a black square around it (picture). This only happens on IOS browsers.
I'm using
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Any ideas?
Anyone had the same problem?
I tried several ways to fix it, but in the end I tried one simple thing and it worked... I change the SVG that I was using. Just added white background on the SVG image and it worked!
Thanks for the help anyways :)
Shot in the dark, since I can't access and play with your code, but try doing:
input[type='checkbox']:checked {
-webkit-appearance: none;
}
Might work, idk. If not, some source code would be nice.
input[type='checkbox'] {
background-color: transparent;
}
Setting background-color to transparent solved this for me.

I want to show opacity:1 for input[type="number"] placeholders

I have one form having input[type="number"].
Placeholder shows reduced opacity on browsers.
I want to show opacity:1 for input placeholders.
It is showing correct for input[type="text"] but not for input[type="number"].
Not getting why is it so.
CSS:
input::-moz-placeholder{
opacity: 1
}
textarea::-moz-placeholder{
opacity: 1
}
Can anyone help me?
Try marking the css as important so that would be rendered
input::moz-placeholder
{
opacity:1 !important
}
It's a bug in firefox. Which seems not working in firefox.
Check Firefox bug And Firefox bug
try this with extended support
input[type="number"]::moz-placeholder {
opacity:1 !important;
}
input[type="number"]:moz-placeholder {
opacity:1 !important;
}
input[type="number"]::-webkit-input-placeholder {
opacity:1 !important;
}
input[type="number"]:-ms-input-placeholder {
opacity:1 !important;
}

Zurb foundation select input - 2 arrows issue

I am just wondering why the Zurb Foundation's select input works fine on their website:
foundation forms
And when I copy the excact code from their example and put on my website - there occurs a 'second arrow issue' on firefox:
The question is what would be the best fix for that issue.I use:
select {
background-image: none;
}
I am not sure if it is the best way to work around that, of course remembering to apply that code only for firefox.
Any ideas how to fix the problem without any 'hacks'?
It's seems to be a Firefox bug for version 30.0 and up on certain device. Unfortunately I have no work around... other than removing the arrow on the select box.
For me worked:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
It is a fix for other browsers too.
Im using Firefox 26.0 and the select arrow doesn't show at all, just the standard dropdown arrow box.
Here is my solution to the issue:
#-moz-document url-prefix() {
select {
background-image: url(data:image/svg+xml;
base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
background-position: 100% center;
background-repeat: no-repeat;
padding: 0.5rem;
text-indent: 0.01px;
text-overflow: '';
}
}
Working example: JSFIDDLE

How to remove the drop down arrow in mozilla firefox

How can I remove the drop down arrow normally displayed by FireFox? I have uploaded an image of what I am working with below:
I am using this css:
#-moz-document url-prefix(){
.class select { width: 110%; }
}
.class > select {
-moz-appearance: none !important;
text-indent: 0.01px !important;
text-overflow: "" !important;
}
Please help me to solve this issue.
It is not possible that way. Best way is to fake it and create your own customized <select>.
Have a look at this fiddle I created http://jsfiddle.net/JayKandari/FWLRw/5/
This trick stopped working as of Firefox 30 realeased in 2014-06-10.
You can upvote the bug on Bugzilla for a definitive fix.
Option 1:
Remove the custom styles on Firefox only through a url-prefix media query, like:
#-moz-document url-prefix() {
select {
background-image: none;
}
Option 2:
Here is a solution