Style input type=number

Question

I have this input type:

input[type=number] {
    width:9vw;
 height:10vw;
 max-width:42px;
 max-height:52px;
 text-align: center;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
 border-radius:1px;
 text-align:center;
 border:3px solid black;
 display:inline-block;
 margin-left:6%;
 background-color:black;
 color:white;
}

<input type="number"  MIN="0" MAX="15"  default="2" >

I noticed that the display changes with different browsers. I I would set the arrows always visible and which cover the entire height. I would only white arrows on a black background. I need also to set default value to 2. thanks for your help

Do you want to set the arrow in the input box as well???? – Murad Hasan Feb 08 '16 at 15:46 — Murad Hasan, Feb 08 '16 at 15:46

durbnpoisn · Answer 1 · 2016-02-08T16:00:31.580

1

You don't use default. You use value:

<input type="number"  MIN="0" MAX="15"  value="2" >

Your min and max will be ignored. That should be handled with Javascript. That is not true. It actually works fine. Plus, it even auto-filters bad values.

As far as the looking different part... You have a condition in your style to allow for different browsers. That may or may not be overridden at render time.

edited Feb 08 '16 at 16:00

answered Feb 08 '16 at 15:40

durbnpoisn

4,666
2
16
30

Part of this is incorrect; the `min` and `max` values are pretty well adhered to as long as set in an HTML5 document. http://www.w3schools.com/tags/att_input_min.asp – Martin Feb 08 '16 at 15:55

score 1 · Answer 2 · answered Feb 08 '16 at 15:51

As durbnpoisn said, you can simply set a value attribute to fix your default value problem.

Since you gave your input field a type, you're referencing to the HTML5 input field, which automatically includes those arrows. To get some custom arrows, you have to play around with -webkit-appearance: none;. In order to do so, I've found 2 simple explanations to achieve this here and here.

Combined together this would look somehow like this:

<input type="number" value="2">

input[type=number] {
  width: 9vw;
  height: 10vw;
  max-width: 42px;
  max-height: 52px;
  text-align: center;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  text-align: center;
  border: 3px solid black;
  display: inline-block;
  margin-left: 6%;
  background-color: black;
  color: white;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    background: #eee url('https://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;  
    width: 14px;
    height: 14px;
    padding: 4px;
    position: relative;
    right: 4px;
    border-radius: 28px;
}

You can also check this in a little fiddle.

Style input type=number

2 Answers2

Linked