How to control the size of input type="number" arrow buttons

Question

I'm implementing an input combo box of type="number".

I want to adjust the size of the up-arrow button and bottom-arrow button.

I think that these buttons are so small buttons that users may feel an inconvenient click motion.

I've been trying to fix this by Googling, investigating properties and selectors of this, but I couldn't get any methods, and I expect that this is because number box has been recently released tag of HTML5.

How Can I adjust this size? please give me any idea. please.

Regards,

<td>
<input type="number" name="qty" value="1" name="goodsnum" onChange = "qtyChanged();">
</td>

Answer 1

You can interact with arrows by css.

input[type=number] {
    height: 30px;
}

input[type=number]:hover::-webkit-inner-spin-button {  
    width: 14px;
    height: 30px;
}

<input type="number" value="0" >