样式输入 type=number [英] Styling an input type=number

问题描述

是否可以在 CSS 中 的内部向上箭头"和向下箭头"中应用样式?我想将向上箭头的背景更改为蓝色，将向下箭头更改为红色.有什么想法吗?

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?

推荐答案

UPDATE 17/03/2017

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

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

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

这篇关于样式输入 type=number的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！