Question

是否可以在内部＆＃34;向上箭头中应用一种风格＆＃34;并且＆＃34;向下箭头＆＃34;输入类型= css中的数字？我想将箭头的背景改为蓝色并向下箭头红色。有什么想法吗？

styling inner arrows

Answer 1

更新2017年3月17日

原始解决方案将不再适用。旋转器是影子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" />

Answer 2

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

Answer 3

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

注意：

添加pointer-events: none;可让您点击重叠按钮，但不会在悬停时设置按钮的样式。
箭头在Edge中可见，但不起作用，因为Edge不使用箭头。它只增加了一个＆＃34; x＆＃34;清除输入。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

疯狂的想法......

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

上面的chrome代码工作正常。我在mozila尝试过这样的但是没有用。我找到了解决方案

对于mozila

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

由于 Sanjib

Answer 7

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

我找到的最稳定的选项是使用指针事件绝对定位图像：无;在纺纱厂之上。

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

Answer 8

我一直在手机和平板电脑上苦苦挣扎。我的解决方案是在微调器上使用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>

样式输入类型=数字

8 个答案: