html - CSS : Want an input type number CSS just like google

Question

我正在尝试制作 input type number 的 css，就像在 Google Chrome 中一样。但它在我的 mozila 浏览器中不起作用。

我不知道如何让它像在谷歌浏览器中看到的那样。

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
  }

  input[type=number]::-webkit-inner-spin-button:before,
  input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
    font-family:monospace;
    line-height:1px;
  }

  input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
  }

  input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
  }

<input type="number" value="10" max="15">

Answer 1

那是因为你不能在 ::webkit-inner-spin-button 上使用伪类。

参见this对于 working example

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. source