设置输入类型的样式=数字

Question 1

是否可以<input type="number">在CSS的内部“向上箭头”和“向下箭头”中应用样式？我想将向上箭头的背景更改为蓝色，将向下箭头的背景更改为红色。有任何想法吗？

造型内部箭头

Question 2

更新17/03/2017

原始解决方案将不再起作用。微调器是影子dom的一部分。现在只需要隐藏在chrome中即可：

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<input type="number" />

展开摘要

或始终显示：

input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}

<input type="number" />

展开摘要

~~您可以尝试以下操作，但请记住，该方法仅适用于Chrome：~~

显示代码段

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;
}

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" />

展开摘要

Question 3

对于mozila

input[type=number] { 
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0; 
}

对于Chrome

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
}

Question 4

我稍微修改了@LcSalazar的答案...还是不完美，因为默认按钮的背景仍然可以在Firefox，Chrome和Opera中看到（未在Safari中测试）；但是点击箭头仍然有效

笔记：

添加pointer-events: none;使您可以单击重叠的按钮，但是在悬停时无法设置按钮的样式。
箭头在Edge中可见，但由于Edge不使用箭头而无法使用。它仅添加一个“ x”以清除输入。

.number-wrapper {
  position: relative;
}

.number-wrapper:after,
.number-wrapper:before {
  position: absolute;
  right: 5px;
  width: 1.6em;
  height: .9em;
  font-size: 10px;
  pointer-events: none;
  background: #fff;
}

.number-wrapper:after {
  color: blue;
  content: "\25B2";
  margin-top: 1px;
}

.number-wrapper:before {
  color: red;
  content: "\25BC";
  margin-bottom: 5px;
  bottom: -.5em;
}

<span class='number-wrapper'>
    <input type="number" />
</span>

展开摘要

Question 5

与其他答案略有不同，使用类似的概念，但使用div代替伪类：

input {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50px;
  height: 20px;
  padding: 0px;
  font-size: 14pt;
  border: solid 0.5px #000;
  z-index: 1;
}

.spinner-button {
  position: absolute;
  cursor: default;
  z-index: 2;
  background-color: #ccc;
  width: 14.5px;
  text-align: center;
  margin: 0px;
  pointer-events: none;
  height: 10px;
  line-height: 10px;
}

#inc-button {
  left: 46px;
  top: 10.5px;
}

#dec-button {
  left: 46px;
  top: 20.5px;
}

<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>

展开摘要

Question 6

疯狂的主意...

您可以使用一些伪元素，并创建CSS内容十六进制代码的向上/向下箭头。唯一的挑战是精确定位箭头，但它可能会起作用：

input[type="number"] {
    height: 100px;
}

.number-wrapper {
    position: relative;
}

.number-wrapper:hover:after {
    content: "\25B2";
    position: absolute;
    color: blue;
    left: 100%;
    margin-left: -17px;
    margin-top: 12%;
    font-size: 11px;
}

.number-wrapper:hover:before {
    content: "\25BC";
    position: absolute;
    color: blue;
    left: 100%;
    bottom: 0;
    margin-left: -17px;
    margin-bottom: -14%;
    font-size: 11px;
}

<span class='number-wrapper'>
    <input type="number" />
</span>

展开摘要

Question 7

我一直在手机和平板电脑上苦苦挣扎。我的解决方案是absolute在微调器上使用定位，所以我只是发布它以防其他人使用：

<html><head>
    <style>
      body {padding: 10px;margin: 10px}
      input[type=number] {
        /*for absolutely positioning spinners*/
        position: relative; 
        padding: 5px;
        padding-right: 25px;
      }

      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
      }

      input[type=number]::-webkit-outer-spin-button, 
      input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: inner-spin-button !important;
        width: 25px;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
      }
    </style>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
  </head>
  <body >
    <input type="number" value="1" step="1" />

  </body></html>

展开摘要

Question 8

上面的chrome代码工作正常。我曾在mozila尝试过这种方法，但无法正常工作。我找到了解决方案

对于mozila

input[type=number] { 
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0; 
}

谢谢桑吉布

Question 9

修改微调器箭头的css是钝角且不可靠的跨浏览器。

我发现的最稳定的选择是使用指针事件绝对定位图像。在微调器上。

在Edge中未经测试，但在所有其他浏览器中均可使用。