On Firefox 28, I'm using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.
In Firefox 29, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6~10 digit number anyway.
Is it possible to disable this with CSS or jQuery?
According to this blog post, you need to set -moz-appearance:textfield; on the input.
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
<input type="number" step="0.01"/>
It's worth pointing out that the default value of -moz-appearance on these elements is number-input in Firefox.
If you want to hide the spinner by default, you can set -moz-appearance: textfield initially, and if you want the spinner to appear on :hover/:focus, you can overwrite the previous styling with -moz-appearance: number-input.
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}
<input type="number"/>
I thought someone might find that helpful since I recently had to do this in attempts to improve consistency between Chrome/FF (since this is the way number inputs behave by default in Chrome).
If you want to see all the available values for -moz-appearance, you can find them here (mdn).
In SASS/SCSS style, you can write like this:
input[type='number'] {
-moz-appearance: textfield;/*For FireFox*/
&::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
-webkit-appearance: none;
margin: 0;
}
}
Definitely this code style can use in PostCSS.
/* for chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;}
/* for mozilla */
input[type=number] {-moz-appearance: textfield;}
Faced the same issue post Firefox update to 29.0.1, this is also listed out here
https://bugzilla.mozilla.org/show_bug.cgi?id=947728
Solutions:
They(Mozilla guys) have fixed this by introducing support for "-moz-appearance" for <input type="number">.
You just need to have a style associated with your input field with "-moz-appearance:textfield;".
I prefer the CSS way
E.g.:-
.input-mini{
-moz-appearance:textfield;}
Or
You can do it inline as well:
<input type="number" style="-moz-appearance: textfield">
This worked for me:
input[type='number'] {
appearance: none;
}
Solved in Firefox, Safari, Chrome. Also, -moz-appearance: textfield; is not supported anymore (https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
In 2021, there is a much better solution to make your firefox like Google Chrome.
You should use focus and hover, too.
input[type="number"] {
appearance: none; /* textfield also works! */
}
input[type="number"]:focus,
input[type="number"]:hover {
appearance: auto;
}
for more information, please read the documentation
I mixed few answers from answers above and from How to remove the arrows from input[type="number"] in Opera
in scss:
input[type=number] {
&,
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none;
&:hover,
&:focus {
-moz-appearance: number-input;
}
}
}
Tested on chrome, firefox, safari
Related
I tried to disable-hide the clear button and didn't work for Firefox.
But on Chrome, Edge, Safari it works fine. Any idea why? Is there a solution?
Following is the CSS:
input[type="time"]::-webkit-clear-button {
display: none;
}
See the Image of output
<input type="time" required> hides the reset button.
Source: I reviewed https://bugzilla.mozilla.org/show_bug.cgi?id=1479708. :)
You can try this
input[type="time"]::-webkit-clear-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I'm scratching my head on this one... I have a generic WooCommerce checkout form being displayed in the attached screenshot. Everything is fine, except for the checkbox to accept the terms & conditions. It has a zero width. In the screenshot, I've applied a border so you can see the field onscreen. It has "visibilty: visible" and "display: inline". I've tried setting width and min-width with no success. This has to be a simple problem staring me right in the face, but for the life of me I'm not seeing the problem.
Since you're using a WP theme, it may have some CSS out of your control? Thinking the theme is hiding default checkboxes to display custom ones. Try searching to see if anything like this exists in your reset.css:
select, input, textarea {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
}
Note the appearance tags. If so, that means that regular <input type="checkboxes"> wont display properly. I would override it with one of the classes you have on it, or comment it out.
Something like:
.input-checkbox{
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
-o-appearance: checkbox !important;
-ms-appearance: checkbox !important;
appearance: checkbox !important;
}
I have the following html input:
<label class="selectit">
<input value="women_shoulder_bags" type="checkbox" id="in-women-15797">Shoulder Bags
</label>
I also have the following CSS:
.selectit input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
This works in Safari, Chrome and all others. But in Internet Explorer 8, the checkboxes still show up. My question is, how do I use CSS to hide the input checkboxes in Internet Explorer 8?
Thanks
To achieve that for ie10+ you can use ::-ms-check with display:none
https://msdn.microsoft.com/en-us/library/hh771816(v=vs.85).aspx
input::-ms-check{
display:none
}
UPDATE: for ie8, ie9
you can use the same technique in this answer https://stackoverflow.com/a/23777214/2253257
input::-ms-check {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Good browsers :) */
opacity:0;
}
Why don't you just hide it in every browser? Or is there a reason it should show in Opera?
You could try:
.selectit input {
display: none;
}
Try:
.selectit input {
width: 0px; /* or right: 100%; */
position: absolute;
}
I have a print style sheet for my site which prints the basics of a calculation (inputs & outputs).
I've successfully removed all the form elements across browsers apart from IE8 which refuses to remove the down arrow from the select inputs.
So far my code looks like this:
select {
width: 80px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
Works in Firefox & Chrome but not IE8.
Any suggestions ?
Following this answer https://stackoverflow.com/a/17713753/407943
I've tried implementing the same solution but it does not work on my Windows 7 Firefox 22, this is what I get:
select {
-moz-appearance: window;
-webkit-appearance: none;
background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
padding-right: 20px;
}
#-moz-document url-prefix() {
.wrapper {
background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
padding-right: 20px;
}
}
EDIT: here's a jsfiddle http://jsfiddle.net/TGBEZ/1/
Update: this trick stopped working as of FF 30. No other fix so far. Keep your eyes on the full gist for updates.
How to remove the <select> arrow on Firefox:
-moz-appearance:none; doesn't work by itself. You need to add some text-indent and text-overflow. Like this:
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
Learn the details on this gist: https://gist.github.com/joaocunha/6273016
This is a known bug of firefox which won't be corrected soon, or maybe even later (see this bugzilla).
There is a pure CSS/HTML workaround :
HTML :
<div class="styled">
<select></select>
</div>
CSS :
div.styled {
overflow: hidden;
padding: 0;
margin: 0;
}
div.styled select {
width: 115%;
background-color: rgba(0, 0, 0, 0);
background-image: none;
-webkit-appearance: none;
border: none;
}
The Fiddle
The problem here is that you will have to make sure the text won't be too large, otherwise it will get over the image.
Also, there are javascript solutions. Take a look at customselect, a jQuery plugin to easily create your own selects.
Another famous plugin : chosen
This is the only solution that really worked for me on FF/IE/Chrome:
Customized select dropdown arrow not clickable
Using -moz-appearance: window instead of none seems to be working now in FF 30
I have this working in Firefox 30+ with:
-moz-appearance: textfield;