How add buttons to input type number

Add buttons to input type number


<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
/* 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-inner-spin-button {
-webkit-appearance: none;
background: #FFF url( no-repeat center center;
width: 1em;
border-left: 1px solid #BBB;
opacity: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;

<input id="input-number" class="button" type="number" value="50" />


Back to blog