javascript - Firefox 输入橙色轮廓

Question

我有 2 个输入一个滑块和一个数字输入，它们都通过 JavaScript 相互同步。我的数字输入框是灰色的，当我点击它时，它是紫色的。我没有任何轮廓，我的问题是，当我更改滑块时，数字输入也会更新，但是有一个橙色的轮廓。我只在 Firefox 中遇到了这个问题，它看起来很完美。

let range = document.querySelector(
  "input[type=range]"
);
let number = document.querySelector(
  "input[type=number]"
);
range.addEventListener("input", (e) => {
  number.value = e.target.value;
});
number.addEventListener("input", (e) => {
  range.value = e.target.value;
});

:root {
 --first-color: #ffffff;
 --second-color: #5e17a2;
 --third-color: #707070;
 --fourth-color: #cccccc;
}
.number {
  -moz-appearance: textfield;
  width: 30px;
  height: 15px;
  border: 2px solid var(--fourth-color);
  border-radius: 3px;
  text-align: center;
  outline: 0;
  cursor: text;
  color: var(--third-color);
  font-weight: 600;
}

.number:focus {
  border: 2px solid var(--second-color);
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<div class="pvi flex">
  <input type="range" min="0.25" max="5" value="1" step="0.25" class="slider">
  <input type="number" value="1" class="number" placeholder="1,0" min="0">

</div>

标签： javascripthtmlcssfirefox

Answer 1

设置数字输入的步长以匹配范围输入。默认步长值为 1，因此 Firefox 突出显示它似乎无效的事实。

let range = document.querySelector(
  "input[type=range]"
);
let number = document.querySelector(
  "input[type=number]"
);
range.addEventListener("input", (e) => {
  number.value = e.target.value;
});
number.addEventListener("input", (e) => {
  range.value = e.target.value;
});

.number {
  -moz-appearance: textfield;
  width: 30px;
  height: 15px;
  border: 2px solid var(--fourth-color);
  border-radius: 3px;
  text-align: center;
  outline: 0;
  cursor: text;
  color: var(--third-color);
  font-weight: 600;
}

.number:focus {
  border: 2px solid var(--second-color);
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<div class="pvi flex">
  <input type="range" min="0.25" max="5" value="1" step="0.25" class="slider">
  <input type="number" value="1" class="number" step="0.25" placeholder="1,0" min="0">

</div>