CSS 旋转按钮跨浏览器，适用于 Chrome 但不适用于 firefox/safari

Question

我的这个向上/向下旋转按钮在 Google Chrome(mac os) 中工作得很好，但是当我用 Safari 打开它时它有点偏离网格，而在 Firefox 中它完全消失了。

有人可以帮忙处理 CSS 吗？感谢您的帮助

Chrome (CSS working really well):

Safari (kind off from the input field):

Firefox (not showing at all?):

/* style input number spinner */

input[type="number"] {
  position: relative;
  height: 25px;
}


/* Spin Buttons modified */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
  width: 1em;
  border-left: 1px solid #BBB;
  opacity: 0.7;
  /* shows Spin Buttons per default (Chrome >= 39) */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

input[type="number"]::-webkit-inner-spin-button:hover,
input[type="number"]::-webkit-inner-spin-button:active {
  box-shadow: 0 0 2px #0CF;
  opacity: 1;
}

<form>
  <td><input type="number" min="0.001" step="0.001" name="price" value="" required=""></td>
</form>

Answer 1

根据 , MDN此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它:它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

你仍然可以为 FireFox 做这样的事情(这不适用于 chrome):

div:before, div:after {
    display: block;
    position: absolute;
    width: 14px;
    height: 8px;
    line-height: 8px;
    background-color: #ccc;
    left: 136px;
    z-index: 1;
    font-size: 9px;
    text-align: center;
    pointer-events: none;
}

div:before {
    content: "▲ ";
    top: 11px;
}

div:after {
    content: "▼";
    top: 20px;
}

<div><input type="number" value="55" min="0" max="100" step="5" /></div>

希望这对您有所帮助!