Search code examples
htmlcssvendor-prefix

why we need outer spin button to remove arrows from number

What is the different between inner-spin-button and outer-spin-button, when I use only inner-spin-button its work successfully in google chrome, so why do we need outer-spin-button 

.removeNumberArrow::-webkit-inner-spin-button,
.removeNumberArrow::-webkit-outer-spin-button {
-webkit-appearance: none;
}

and what does this syntax mean

.removeNumberArrow::-webkit-inner-spin-button,
.removeNumberArrow::-webkit-outer-spin-button
Solution

  • inner-spin and outer-spin are part of some legacy code. That's why they ask to use both pseudo-selectors when formatting spinners.

    input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

    Webkit official documentation

    .removeNumberArrow::-webkit-inner-spin-button,
.removeNumberArrow::-webkit-outer-spin-button

    The selectors here mean to select all elements which has class removeNumberArrow and with them choose pseudo elements -webkit-inner-spin-button and -webkit-outer-spin-button and format them with their appearance as none.