Making up down arrow of HTML's input number much bigger and cleaner

Question

Rather than Is it possible to always show up/down arrows for input "number"?, I want to be able to make up/down arrow much bigger and cleaner.

What I have

Answer 1

well, to achieve that you have to play with pseudo elements and some CSS3 tricks.

to create triangle https://css-tricks.com/snippets/css/css-triangle/

to manipulate input number spinners

input[type=number]::-webkit-inner-spin-button {
    /* your code*/
}

here is the example.

input {
	  color: #777;
	  width: 2em;
	  font-size: 2em;
	  border-radius: 10px;
	  border: 2px solid #ccc;
	  padding: 5px;
	  padding-left: 10px;
	}
	input[type=number]::-webkit-inner-spin-button {
	  -webkit-appearance: none;
	  cursor: pointer;
	  display: block;
	  width: 10px;
	  text-align: center;
	  position: relative;
	  background: transparent;
	}
	input[type=number]::-webkit-inner-spin-button::before,
	input[type=number]::-webkit-inner-spin-button::after {
	  content: "";
	  position: absolute;
	  right: 0;
	  width: 0;
	  height: 0;
	  border-left: 7px solid transparent;
	  border-right: 7px solid transparent;
	  border-bottom: 10px solid #777;
	}
	input[type=number]::-webkit-inner-spin-button::before {
	  top: 7px;
	}
	input[type=number]::-webkit-inner-spin-button::after {
	  bottom: 7px;
	  transform: rotate(180deg);
	}