本文介绍了Firefox中的-webkit-external-spin-button和-webkit-inner-spin-button的替代选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我试图实现的是这样的(在Chrome中):


但是这个技巧在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;
})


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的替代选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-24 07:28