.stepper{
  width: 100%;
  max-width: 100px;
  height: 32px; 
  margin: 0 0 0 0;
  position: relative;
  overflow: hidden;
  display: inline-flex;
}
.stepper .stepper-input{
  width: 100%;
  min-width: 50px;
  height: 28px;
  color: #000;
  background: #FFF;
  border: 1px solid #CCC;
  margin: 0;
  box-sizing: content-box;
  padding: 1px 0 1px 5px;
  overflow: hidden;
  z-index: 49;
}
.stepper:hover .stepper-input, .stepper .stepper-input:focus {
  background-color: #F9F9F9;
}
.stepper .stepper-step {
  width: 20px;
  height: 16px;
  background: #EEE url(../images/stepper.png) no-repeat;
  border: 1px solid #CCC;
  cursor: pointer;
  display: block;
  position: absolute;
  right: 0;
  text-indent: 99999px;
  z-index: 50;
}
.stepper .stepper-step:hover {
  background-color: #F9F9F9;
}

/* Up and Down arrows */
.stepper .stepper-step.up {
  background-position: center 0;
  border-bottom: none;
  top: 0;
}
.stepper .stepper-step.down {
  background-position: center -19px;
  bottom: 0;
}

/* Disabled */
.stepper.disabled .stepper-input {
  background: #FFF;
  border: 1px solid #EEE;
  color: #CCC;
}
.stepper.disabled .stepper-step, .stepper.disabled .stepper-step:hover {
  background: #F9F9F9;
  border: 1px solid #EEE;
  cursor: default;
}
.stepper.disabled .stepper-step.up {
  background: #F9F9F9 url(../images/stepper.png) no-repeat;
  background-position: center top;
  border-bottom: none;
  top: 0;
}
.stepper.disabled .stepper-step.down {
  background: #F9F9F9 url(../images/stepper.png) no-repeat;
  background-position: center bottom;
  bottom: 0;
}