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>
