'Chrome adding up and down arrows in checkbox

I using an input type number to create a checkbox. The checkbox works fine using IE but in Chrome and Edge, the checkbox has up and down arrows inserted which I don't need.

below is my html

 <input id="duration" type="number" value="0" style="width: 35px; height: 30px; font-family: verdana; font-size: 8pt; font-weight: bold; text-align: center">

CheckBox Screen

html


Solution 1:[1]

Up and down arrows in the number input type is browsers' default behavior.

If you want to clean them up, you can use this style in your CSS which will be applied to all browsers.

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

You can check the document here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nick Vu

Related Questions