How to style input field number up and down on Firefox
I am trying to create an up and down button for an input field number on FF. I have successfully achieved this on chrome with the code below, but I cannot find any CSS trick to do this in FF.
I cannot use JS for this.
Is it possible to style up and down CSS in FF? if so, how? - I only need to do this in the latest version
DOM
<div class="productQty">
<span></span>
<input type="number" max="10" min="1" class="mod"/>
</div>
CSS
input[type="number"] {
height: 30px;
width: 60px;
font-size: 18px;
position: relative;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.productQty span {
display: block;
width: 41px;
height: 30px;
background: white;
z-index: -1;
position: absolute;
top: 0;
left: 0;
bottom: 0;
border: solid 1px #999999;
}
/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: transparent url("../img/updown.png") no-repeat center center;
width: 16px;
height: 100%;
opacity: 1; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-moz-inner-spin-button:hover,
input[type="number"].mod::-moz-inner-spin-button:active{
border: none;
}
/* Override browser form filling */
input:-webkit-autofill {
background: black;
color: red;
}
What chrome looks like and what it looks like
What it looks like in FF 38
+3
source to share
1 answer
You cannot directly apply css to buttons on FF, this is reported by an error: https://bugzilla.mozilla.org/show_bug.cgi?id=1108469
If you do not mind to use some css to contain elements that you can use :before
and :after
to overlay custom buttons.
div:before, div:after {
display: block;
position: absolute;
width: 14px;
height: 8px;
line-height: 8px;
background-color: #ccc;
left: 136px;
z-index: 1;
font-size: 9px;
text-align: center;
pointer-events: none;
}
div:before {
content: "+";
top: 11px;
}
div:after {
content: "-";
top: 20px;
}
<div><input type="number" /></div>
0
source to share