Chrome adding up and down arrows in checkbox-CodePudding

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

CodePudding user response：

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