输入类型编号隐藏箭头

Question

我的页面中输入了type = number，并且未显示箭头。输入看起来像普通文本输入。我想是因为这个：

我使用Google CHrome。我该如何覆盖这些样式？

Answer 1

这只会在webkit中有所帮助;如果您真的需要更改样式，则可能需要使用自定义输入元素。

https://jsfiddle.net/Volker_E/WwfW9/

input[type="number"] {
    position: relative;
    margin: 0 0 1rem;
    border: 1px solid #BBB;
    border-color: #BBB #ECECEC #ECECEC #BBB;
    padding: .2rem;
}

/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button, 
input[type="number"].mod::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
    width: 1em;
    border-left: 1px solid #BBB;
    opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
input[type="number"].mod::-webkit-inner-spin-button:hover,
input[type="number"].mod::-webkit-inner-spin-button:active{
    box-shadow: 0 0 2px #0CF;
    opacity: .8;
}

/* Override browser form filling */
input:-webkit-autofill {
    background: black;
    color: red;
}