CODEWITHSUNDEEP
htmlcss
Red
Red

Reputation: 7299

How to reset number input back to default behaviour in Chrome

I have a file where the following CSS is defined

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

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

Now I wanted to target a specific target to undo the above. With FireFox I can simply do

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

But in Chrome, this doens't work

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

FireFox

enter image description here

Chrome

enter image description here

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>

How can I let the spinner buttons reappear in Chrome?

Upvotes: 0

Views: 1455

Answers (1)

Thomas van Broekhoven
Thomas van Broekhoven

Reputation: 898

The value you're looking for is inner-spin-button, see snippet.

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>

Upvotes: 3

Related Questions