0

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?

Red
  • 6,599
  • 9
  • 43
  • 85
  • Possible duplicate of [number input - always show spin buttons](https://stackoverflow.com/questions/24286506/number-input-always-show-spin-buttons) – Rainbow Jun 13 '18 at 14:58
  • @ZohirSalakCeNa No, I don't want it to be visible all times. – Red Jun 13 '18 at 15:03
  • From there you can modify the code to your desired end result, which makes this question a duplicate – Rainbow Jun 13 '18 at 15:04
  • Nope, see accepted anwser. Thats what I wanted, nothing to do with visibility. – Red Jun 13 '18 at 15:05

1 Answers1

3

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>
Thomas van Broekhoven
  • 858
  • 7
  • 18
  • Many thanks, this value isn't present in the autocomplete of VS2015. So we were struggling and searching along time. – Red Jun 13 '18 at 15:04
  • Np, another thing: Is there a reason you have to do it like this? Isn't it easier to bind the `-webkit-appearance: none;` to a classname? – Thomas van Broekhoven Jun 13 '18 at 15:12
  • Yeah we could do that, but its alot of work at the moment. Because alot of input fields exists. – Red Jun 13 '18 at 17:46