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
My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn't look good at all with the rest of my website.
Is there a way to instruct Safari (via CSS or metadata) not to round the input fields and render them rectangular as intended?
On iOS 5 and later:
input {
border-radius: 0;
}
input[type="search"] {
-webkit-appearance: none;
}
If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use input { -webkit-border-radius: 0; } property instead, which is still supported. Of course do note that Apple can choose to drop support for the prefixed property at any time, but considering their other platform-specific CSS features chances are they'll keep it around.
On legacy versions you had to set -webkit-appearance: none instead:
input {
-webkit-appearance: none;
}
input -webkit-appearance: none; alone does not work.
Try adding -webkit-border-radius:0px; in addition.
It is the best way to remove the rounded in IOS.
textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
Note: Please don't use this code for the Select Option. It will have problem on our select.
The accepted answer made radio button disappear on Chrome. This works:
input:not([type="radio"]):not([type="checkbox"]) {
-webkit-appearance: none;
border-radius: 0;
}
For me on iOS 5.1.1 on a iPhone 3GS I had to clear the styling of a search field and the set it to the style intended
input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}
Doing -webkit-border-radius: 0; alone did not clear the native styling. This was also for a webview on a native app.
Here is the complete solution for Compass (SCSS):
input {
-webkit-appearance: none; // remove shadow in iOS
#include border-radius(0); // remove border-radius in iOS
}
I had the same problem but only for the submit button. Needed to remove the inner shadow and rounded corners -
input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
If you use normalize.css, that stylesheet will do something like input[type="search"] { -webkit-appearance: textfield; }.
This has a higher specificity than a single class selector like .foo, so be aware that you then can't do just .my-field { -webkit-appearance: none; }. If you have no better way to achieve the right specificity, this will help:
.my-field { -webkit-appearance: none !important; }
I used a simple border-radius: 0; to remove the rounded corners for the text input types.
Please Try This one:
Try Adding input Css like this:
-webkit-appearance: none;
border-radius: 0;
In order to render the buttons properly on Safari and other browsers, you'll need to give a specific style for the buttons in addition to setting webkit-appearance to none, e.g.:
border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf
In the end, I want firefox and chrome to display the same way. On chrome I've noticed that float: left breaks the site but works on FF. However, if I put float:none Chrome displays perfectly but then it is broken on FF.
I have tried #-moz-document url-prefix() {.attempt{float:left}} but that appears not to be working. I've tried #document url() {.attempt{float:left}} but that doesn't help either.
Any help would be greatly appreciated.
<style>
#-moz-document url-prefix() {
.attempt {
float:left
}
}
.attempt {
float:none
}
</style>
<div class="attempt">someText</div>
Also It has been asked before with no answer.
On the surface it would seem to be because your #-moz-document appears before the float:none rule — so it will always get overridden regardless. The presence of a conditional at-rule does not change how the cascade works; this is a common gotcha with #media rules and applies just as well to #-moz-document.
You want to move it to the bottom so it will override the previous rule properly in Firefox:
<style>
.attempt {
float:none
}
#-moz-document url-prefix() {
.attempt {
float:left
}
}
</style>
<div class="attempt">someText</div>
As of May 2018, the answer #BoltClock gave has been deprecated. The solution is a media query ( seen below ):
#media screen and (min--moz-device-pixel-ratio:0) {
#logo {
padding-top: 1.5rem;
}
}
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
until safari 5.1 and maybe 6.0 it was possible to hide the slider-thumb via css
input[type=range].onoff::-webkit-slider-thumb,
input[type=range].onoff::-moz-slider-thumb,
input[type=range].onoff::slider-thumb {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
height:20px; width:20px;
background-color:transparent;
}
worked also in chrome, ff and opera.
now with safari 6.1 and 6.1.1, firefox 25
this css is not hiding the slider-thumb anymore.
what did i miss?
is there a better, more valid code i could use to hide just the thumb?
no jquery solutions please, i work on a native javascript plugin to add touchable audio-wheels, working in different environments. maybe later i will translate this to jQ too.
okay testet..
looks like, the comma separated list of selectors and setting them all ot once is not working anymore. so valid code can be..
input[type=range].onoff::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range].onoff::-moz-slider-thumb {
-moz-appearance: none;
}
input[type=range].onoff::slider-thumb {
appearance: none;
}
but still in FF i can't hide the thumb, how?