样式化输入类型=数字 [英] Styling a input type=number

问题描述

是否可以在css中的输入类型=数字的内部向上箭头和向下箭头中应用样式？我想改变为蓝色的箭头的背景和红色的箭头下来。任何想法？

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

推荐答案

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

You can try the following but keep in mind that works only for 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;
    font-family:monospace;
    line-height:
}

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

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