How add buttons to input type number
Add buttons to input type number
INPUT
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><style>/* General Styles */body { margin: 2rem; font-family: sans-serif;}label { display: block; font-size: .8rem;}input[type="number"] { position: relative; margin: 0 0 1rem; border: 1px solid #BBB; border-color: #BBB #ECECEC #ECECEC #BBB; padding: .2rem;}/* Spin Buttons modification */input[type="number"].button::-webkit-outer-spin-button, input[type="number"].button::-webkit-inner-spin-button { -webkit-appearance: none; background: #FFF url(https://cdn.shopify.com/s/files/1/0302/4551/9492/files/buttons-1.png?v=1599725881) no-repeat center center; width: 1em; border-left: 1px solid #BBB; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0;}</style></head><body><input id="input-number" class="button" type="number" value="50" /></body></html>
OUTPUT
