How to style input

type number two arrow?

<input type="number">

Thanks

Hi,

Sorry but I don’t understand your question. Can you give us more info on what you want to achieve?

Here is a link to MDN on the type of input you are interested in styling (just in case you need more info)

http://jsfiddle.net/sdaekvph/

Click in box

I’m not familiar with js fiddle.
I tried the same on codepen it seems to work.
Example here

Click in input box and see arrows!

You want to click on the field to increase the value and see an arrow when you do?
Sorry I don’t understand what you want.

When you click in the box above you got two arrow for number UP and DOWN I mean that… ask to style

Sorry never did this kind of styling.
This stack overflow question has some tips

Or this codepen using jquery

1 Like

Not in way that will work cross-browser, no.

1 Like

Taken from the stackoverflow answer linked above (I’ve used the same solution in my projects). It’s for hiding the arrows.

For Mozilla

input[type=number] { 
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0; 
}

For Chrome

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
}
2 Likes