HTML5号字段箭头自定义

Question

我可以自定义

<input type='number'> 

字段一直显示它的箭头？默认情况下，它隐藏直到该字段没有焦点。以下是我正在谈论的内容。

Answer 1

Firefox和IE没有这样的行为。因此，我假设您正在使用Google Chrome。

input::-webkit-inner-spin-button {
    opacity: 1;
}

FYI。 UA样式表具有以下内容：

input::-webkit-inner-spin-button {
    ...
    opacity: 0;
    pointer-events: none;
}

input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {
    opacity: 1;
    pointer-events: auto;
}

html.css

Answer 2

<input type='number'>的UI和行为，以及所有其他HTML5输入类型（例如，type='date'等），取决于浏览器和/或系统。为了使箭头始终可见，您需要使用自定义JS解决方案。

Answer 3

我能想到的唯一方法是......有两个按钮用于递增和递减input并使用JS。你不会在这里使用type="number"，因为JS会为你增加和减少数字。

这是一个例子，如here所述：

<强> CSS：

.spin {
    display: inline-block;
}
.spin span {
    display: inline-block;
    width: 20px;
    height: 22px;
    text-align: center;
    padding-top: 2px;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.spin span:first-child {
    border-radius: 4px 0 0 4px;
}
.spin input {
    width: 40px;
    height: 20px;
    text-align: center;
    font-weight: bold;
}

<强> JS：

var spins = document.getElementsByClassName("spin");
for (var i = 0, len = spins.length; i < len; i++) {
    var spin = spins[i],
        span = spin.getElementsByTagName("span"),
        input = spin.getElementsByTagName("input")[0];

    input.onchange = function() { input.value = +input.value || 0; };
    span[0].onclick = function() { input.value = Math.max(0, input.value - 1); };
    span[1].onclick = function() { input.value -= -1; };
}

注意：更改background: #fff;以更改箭头颜色。网上还有其他简洁的例子！

<强> Demo