Question

我需要在向上和向左的左边有一些空间。在我的输入数字字段中向下箭头，我打算在默认情况下放置一些符号。但-webkit-inner-spin-button和.staff-picked-videos .col-md-3:nth-child(4n+1) { clear: both; }现在无法在Firefox上运行。有没有Firefox支持的替代方案？我需要右对齐文本，文本（此处为数字）必须显示在默认符号的左侧。

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

但是这个技巧在Firefox或Edge中无效。

Answer 1

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

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-outer-spin-button和-webkit-inner-spin-button

1 个答案: