如何在Chrome中将号码输入重置为默认行为

Question

我有一个文件，其中定义了以下CSS

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

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

现在我想针对特定目标撤消上述内容。使用FireFox我可以做到

.reset [type="number"] {
    -moz-appearance: spinner-textfield;
}

但是在Chrome中，这种方式不起作用

.reset input[type='number']::-webkit-outer-spin-button,
.reset input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: spinner-textfield;
}

火狐

铬

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

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.reset [type="number"] {
    -moz-appearance: spinner-textfield;
}

.reset input[type='number']::-webkit-outer-spin-button,
.reset input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: spinner-textfield;
}

<input type="number" />

<div class="reset">
    <input type="number" />
</div>

如何让微调器按钮重新出现在Chrome中？

Answer 1

您要查找的值为inner-spin-button，请参阅代码段。

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

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.reset [type="number"] {
    -moz-appearance: spinner-textfield;
}

.reset input[type='number']::-webkit-outer-spin-button,
.reset input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
}

<input type="number" />

<div class="reset">
    <input type="number" />
</div>