html - 如何在 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;
}

火狐

Chrome

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>