Alternative of -webkit-outer-spin-button and -webkit-inner-spin-button in Firefox
10,624
Not so sure it works well. And not suggesting you to achieve this requirement. I think you should get rid of the default spin-button.
HTML:
<div class="edit-wrapper">
<input id="edit_input_1" type="number" min="0" max="999">
<input id="edit_input_2" type="text">
</div>
CSS:
.edit-wrapper {
max-width: 80px;
position: relative;
}
.edit-wrapper input[type=number] {
width: 100%;
text-align: right;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
}
.edit-wrapper input[type=number]::-webkit-outer-spin-button,
.edit-wrapper input[type=number]::-webkit-inner-spin-button {
margin-left: 20px;
}
.edit-wrapper input[type=number]::-moz-outer-spin-button,
.edit-wrapper input[type=number]::-moz-inner-spin-button {
margin-left: 20px;
}
.edit-wrapper:before {
content: '%';
position: absolute;
right: 20px;
top: 1px;
}
#edit_input_1 {
color: transparent;
text-align: left;
}
#edit_input_2 {
width: 100%;
background: transparent;
pointer-events: none;
max-width: 80px;
height: 100%;
border: 0;
padding-right: 33px;
text-align: right;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
Javascript:
var viewInput = document.getElementById('edit_input_2');
var manipulateInput = document.getElementById('edit_input_1');
manipulateInput.addEventListener('change', function(){
viewInput.value = manipulateInput.value;
})
manipulateInput.addEventListener('keyup', function(e){
viewInput.value = manipulateInput.value;
})
https://jsfiddle.net/1dddncj0/5/
Author by
Preetom Saha Arko
Updated on June 05, 2022Comments
-
Preetom Saha Arko almost 2 years
I need some space to the left of the up & down arrows in my input number field, where I plan to put some symbols by default. But
-webkit-outer-spin-button
and-webkit-inner-spin-button
doesn't work on Firefox now. Is there any alternative which Firefox supports? I need to right-align the text and the text (here number) must show up to the left of the default symbols.What I try to achieve is something like this (in Chrome): https://jsfiddle.net/1dddncj0/3/
But this trick is not working in Firefox or Edge.
-
Preetom Saha Arko almost 7 yearsIt is not that much responsive. In chrome, it is preventing me from entering something using keyboard.
-
Gabriel Cheung almost 7 yearsNo, it's not a good solution. That's why I suggest you to get rid of the default spin button and write a component yourself. I also tried
direction: rtl
withtext-algin: left;
andtext-intent: 30px
, still got no luck on Firefox. -
Preetom Saha Arko almost 7 yearsWriting a component myself doesn't seem easy for a newbie like me @gabriel
-
Gabriel Cheung almost 7 yearsQuite similar with this solution, just to create a spin button with Javascript listening the click event, and update the input value.