Firefox中的-webkit-external-spin-button和-webkit-inner-spin-button的替代选项 [英] Alternative of -webkit-outer-spin-button and -webkit-inner-spin-button in Firefox

问题描述

我需要一些空间到左上角，向下箭头在我的输入号码字段中，我打算在默认情况下放一些符号。但是 -webkit-external-spin-button 和 -webkit-inner-spin-button 在Firefox上不起作用现在。有没有其他的Firefox支持？我需要对齐文本和文本（这里编号）必须显示在默认符号的左侧。

我试图实现的是这样的（在Chrome中）：
https://jsfiddle.net/1dddncj0/3/

但是这个技巧在Firefox或Edge中不起作用。

解决方案

不太确定它运作良好。而不是建议你达到这个要求。我认为你应该摆脱默认的旋钮。

HTML：

 < div class =edit-wrapper> 
< input id =edit_input_1type =numbermin =0max =999> 
< input id =edit_input_2type =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，其他WebKit * / 
 -moz-box-sizing：border-box; / * Firefox，其他Gecko * / 
} 
 
 .edit-wrapper input [type = number] ::  -  webkit-external-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％; 
背景：透明; 
 pointer-events：none; 
最大宽度：80px; 
身高：100％; 
 border：0; 
 padding-right：33px; 
 text-align：right; 
 box-sizing：border-box; 
 position：absolute; 
 top：0; 
剩下：0; 
 
 $ / code $ / $ p 
 
  
 
 
  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/  
 
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.
解决方案
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/

                        
这篇关于Firefox中的-webkit-external-spin-button和-webkit-inner-spin-button的替代选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！