Html 样式输入类型=数字

Styling a input type=number

提问by M?ltus

Is it possible to apply a style in the inner "up arrow" and "down arrow" of a <input type="number">in CSS? I would like to change the background of the up arrow to blue and the down arrow to red. Any ideas?

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

采纳答案by Alex Char

UPDATE 17/03/2017

更新 17/03/2017

Original solution won't work anymore. The spinners are part of shadow dom. For now just to hide in chrome use:

原来的解决方案将不再适用。旋转器是 shadow dom 的一部分。现在只是为了隐藏在 chrome 中使用：

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

<input type="number" />

or to always show:

或始终显示：

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

<input type="number" />

You can try the following but keep in mind that works only for Chrome:

您可以尝试以下操作，但请记住，这仅适用于 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" />

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

回答by saghar.fadaei

For mozila

对于 mozila

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

For Chrome

铬

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

回答by Mottie

I modified @LcSalazar's answer a bit... it's still not perfect because the background of the default buttons can still be seen in both Firefox, Chrome & Opera (not tested in Safari); but clicking on the arrows still works

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

Notes:

笔记：

• Adding pointer-events: none;allows you to click through the overlapping button, but then you can not style the button while hovered.
• The arrows are visible in Edge, but don't work because Edge doesn't use arrows. It only adds an "x" to clear the input.

• 添加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: "B2";
  margin-top: 1px;
}

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

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

回答by Richard Yan

A little different to the other answers, using a similar concept but divs instead of pseudoclasses:

与其他答案有点不同，使用类似的概念，但使用 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>

回答by LcSalazar

Crazy idea...

疯狂的想法...

You could play around with some pseudo elements, and create up/down arrows of css content hex codes. The only challange will be to precise the positioning of the arrow, but it may work:

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

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

.number-wrapper {
    position: relative;
}

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

.number-wrapper:hover:before {
    content: "BC";
    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>

回答by psanjib

the above code for chrome is working fine. i have tried like this in mozila but its not working. i found the solution for that

上面的 chrome 代码工作正常。我在 mozila 中尝试过这样的方法，但它不起作用。我找到了解决方案

For mozila

对于 mozila

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

Thanks Sanjib

谢谢桑吉布

回答by JoeP

I've been struggling with this on mobile and tablet. My solution was to use absolutepositioning on the spinners, so I'm just posting it in case it helps anyone else:

我一直在手机和平​​板电脑上为此苦苦挣扎。我的解决方案是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>

回答by Dave Carney

The css to modify the spinner arrows is obtuse and unreliable cross-browser.

用于修改微调箭头的 css 在跨浏览器中是迟钝且不可靠的。

The most stable option I have found, is to absolutely position an image with pointer-events: none; on top of the spinners.

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

Untested in Edge but works in all other browsers.

未在 Edge 中测试，但适用于所有其他浏览器。