0

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

Alex Aniapam
  • 67
  • 5
  • Does this answer your question? [Can I hide the HTML5 number input’s spin box?](https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box) – showdev Mar 16 '22 at 01:39

1 Answers1

2

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

Nick Vu
  • 14,512
  • 4
  • 21
  • 31