CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ammar Akhtar
Ammar Akhtar

Reputation: 81

How do I style input type="number"?

Here's the code: https://jsfiddle.net/v2tkk26u/3/

<input type="number" id="numeric" size="1"/>

I want the input to be a smaller size (since it will hold only one number) but changing the size attribute seems to have no effect on it.

Also, the up down arrows are too small, especially when I add padding to the input. I want to make them bigger and always stay displayed, not just on hover (to make them mobile friendly).

Upvotes: 0

Views: 191

Answers (3)

Charlie Fish
Charlie Fish

Reputation: 20496

You can set the width and height properties in CSS like so. This for example will set the width and height each to 10px. Of course you can change it to whatever size you want.

#numeric {
    color:blue;
    font-size:1.1em;
    border-radius:5px;
    padding: 5px;
    width: 10px;
    height: 10px;
}

EDIT

Didn't catch that you were trying to style input type="number". I highly suggest reading this article to read more about CSS attribute selectors. But below I will summarize and relate it back to your question.

So in your example if you want to style all input HTML tags where type="number" you can do something like the following.

input[type="number"] {
    color:blue;
    font-size:1.1em;
    border-radius:5px;
    padding: 5px;
    width: 10px;
    height: 10px;
}

If you would like to select all elements (not just input elements) where type="number" you can do the following.

[type~="number"] {
    color:blue;
    font-size:1.1em;
    border-radius:5px;
    padding: 5px;
    width: 10px;
    height: 10px;
}

Upvotes: 2

Sampad
Sampad

Reputation: 1793

Try this one..

body {
  background:yellow;
}
 #numeric {
   color:blue;
   font-size:1.1em;
   border-radius:5px;
   padding: 5px;
   height:20px;
   width:50px;
 }
 input[type=number] {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 0 8px;
}

Upvotes: 0

Blue
Blue

Reputation: 22911

In addition to @CharlieFish's answer, you may want to add some code to restrict the element to only 1 character. Use the min and max element to restrict them from entering a number in that range.

As well as that, you may want to have them only be able to type 1 number. This code will allow you to do that:

document.getElementById('numeric').oninput = function () {
    if (this.value.length > 1) {
        this.value = this.value.slice(0,1); 
    }
}

See the jsfiddle here

Upvotes: 1

Related Questions