Styling a input type=number

Question

Is it possible to apply a style in the inner \"up arrow\" and \"down arrow\" of a in CSS? I would like to change the background of

Answer 1

I modified @LcSalazar's answer a bit... it's still not perfect because the background of the default buttons can still be seen in both Firefox, Chrome & Opera (not tested in Safari); but clicking on the arrows still works

Notes:

• Adding pointer-events: none; allows you to click through the overlapping button, but then you can not style the button while hovered.
• The arrows are visible in Edge, but don't work because Edge doesn't use arrows. It only adds an "x" to clear the input.

.number-wrapper {
  position: relative;
}

.number-wrapper:after,
.number-wrapper:before {
  position: absolute;
  right: 5px;
  width: 1.6em;
  height: .9em;
  font-size: 10px;
  pointer-events: none;
  background: #fff;
}

.number-wrapper:after {
  color: blue;
  content: "\25B2";
  margin-top: 1px;
}

.number-wrapper:before {
  color: red;
  content: "\25BC";
  margin-bottom: 5px;
  bottom: -.5em;
}