CSS:想要输入类型编号CSS就像谷歌一样

时间:2017-02-06 15:55:00

标签: html css input

我正在努力制作input type number的css,就像在Google Chrome中一样。 但它不适用于我的mozila浏览器。

image

我不知道如何在谷歌浏览器中看到它。



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">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

那是因为您无法在::webkit-inner-spin-button上使用类。

请参阅documentation is here了解this

  

此功能不符合标准,不符合标准。不要在面向Web的生产站点上使用它:它不适用于每个用户。实现之间可能存在很大的不兼容性,并且行为可能在将来发生变化。 working example

source