12

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 right now:

I need to make them bigger like this:

mvanella
  • 3,456
  • 3
  • 19
  • 23
Mohammad Naji
  • 5,372
  • 10
  • 54
  • 79
  • Can you post code / demo? – G.L.P Apr 13 '15 at 05:14
  • http://jsfiddle.net/14p8tkex/ – Mohammad Naji Apr 13 '15 at 05:17
  • What browser are you using? seems quite okay on Chrome – Itay Apr 13 '15 at 05:17
  • Thank you @Itay for telling me about Chrome. But even in chrome, the arrows' container had to be wider while its height is OK. – Mohammad Naji Apr 13 '15 at 05:21
  • HTML5 is still a very new spec and the implementation of the controls is completely browser dependent. Features like the buttons aren't standardized yet and probably won't be for a long time. If you need that degree of control, I'd recommend you go with a more predictable and configurable library, like [jQuery UI's Spinner](https://jqueryui.com/spinner/). – JDB Apr 13 '15 at 05:27
  • 1
    will give extra work, but what about a transform ? https://jsfiddle.net/14p8tkex/2/ – vals Apr 13 '15 at 05:46
  • 1
    Yes @vals, it's OK in Chrome. But what about firefox `:-/`? https://jsfiddle.net/14p8tkex/4/ – Mohammad Naji Apr 13 '15 at 05:54

3 Answers3

7

you can wrap a input in and element and style it

div {
  display: inline-block;
  position: Relative;
  border: 2px solid grey;
  border-radius: 10px;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div:before,
div:after {
  background: white;
  right: 0px;
  width: 30px;
  height: 20%;
  position: absolute;
  pointer-events: none;
}
div:before {
  content: '';
  bottom: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  background-position: center;
}
div:after {
  content: '';
  top: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  transform: rotate(180deg);
  background-position: center;
}
input {
  height: 80PX;
  font-size: 50px;
  outline: 0;
  border: 0;
}
<div>
  <input type="number" value="10" />
</div>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
3

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);
 }
<input type="number" value="1">
singhiskng
  • 511
  • 1
  • 5
  • 15
  • If (input) attribute "font-size: 2em;" is too big then the arrows will be too close, try changing (spin-button::before/after) attributes "top: 7px;" and "bottom: 7px;" – mfruizs Apr 29 '15 at 12:01
1

Another solution, offering uniformity between browsers and more customisation options, would be to use the JQuery UI spinner element.

Eino Gourdin
  • 4,169
  • 3
  • 39
  • 67