remove number input arrows from specific input

April 26, 2023

I have a number input where I want to remove the increase/decrease buttons. This is done using:

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

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

However how do I write CSS to apply these to a specific input with id myid ?

<input type="number" id="myid">

>Solution :

You can add the id after the element’s name with # like below:

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

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

<input type="number" id="myid">

Same goes whenever you want to target a specific element with a specific class. In this case, you will have to use . followed by the class name, e.g.

For the element below:

<input type="number" class="myclass">

The CSS selector should be formed like this:

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

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