Input with type=number but add alphabetical suffix

Question

I have <input type="number"></input>. I like the fact that it has type="number" since I want numeric input from the user. I would rather not change its type away from number. However, I would like to display the units after the number. So I want the input to read "5 px" if the unit is in pixels. I want the user to be able to edit the 5 part, but not the px part. The solution found here will not work unless I do more gimmicks and make it hackier, because the "px" would come after the up/down arrows in chrome. These are the arrows I'm talking about![example of arrows][1]

On my environment in chrome, you can just put alphabetical characters in the <input ...>, but this is technically not legal

I need a solution that works on firefox, chrome, safari, and IE9.

will "px" be the only unit you want to display or the user can select which unit he/she wants to display? — Saumil, Jun 12 '15 at 00:44
I will only be using "px". Bonus points for a more general solution though ;) — Kevin Wheeler, Jun 12 '15 at 00:47
If using bootstrap, here is the [solution](http://getbootstrap.com/components/#input-groups) — Vibhor Dube, Jun 12 '15 at 07:05

score 3 · Answer 1 · answered Jun 12 '15 at 10:02

You can achieve this using following code: HTML:

 <div class="size-input-wrapper">
    <label for="inputValidation">Enter size:</label>
    <input type="number" id="inputValidation" placeholder="size"/>
    <span class="pxSpan">px</span>
 </div>

CSS:

.size-input-wrapper {
    max-width: 208px;
    margin: auto;
    position: relative;
    display: inline-block;
}
#inputValidation {
    padding-right: 35px;
}
.pxSpan {
    position: absolute;
    top: 19px;
    right: 10px;
}

FIDDLE HERE

Alternatively, you can use bootstrap for easier implementation. Check this FIDDLE

score 1 · Answer 2 · answered Jun 12 '15 at 00:38

1

I suggest making it a bit wider and floating a <span>px</span> on top of the <input>. With a bit of CSS it will look like it is part of the input content.

answered Jun 12 '15 at 00:38

mike.k

3,277
1
12
18

Kevin Wheeler · Answer 3 · 2015-06-16T22:51:46.420

Just to throw it out there about how I was going to approach this before making this question. I was going to make an additional, identical <input> except not make it type="number" and make it position: absolute. That way it would stack directly under the actual <input ...>. I would then set its value to be " px" putting a space for every digit in the other input. As long as you use a monospaced font, the 'px' should be placed correctly. Browsers may end up overlapping it with arrows or something though, who knows.

Edit: I ended up just making an absolutely positioned, <label>, if you set the for property to be the id of your input, then when you click on the <label> it will focus the input and be ready for keypresses. Then you just change the css of the label to be cursor: text so that when you mouse over the label it has the right cursor. I tested this on IE9+, FF, Safari, and Chrome.

score 1 · Answer 4 · answered Jun 12 '15 at 00:54

1

So how about this general solution.

Create an extra input,

<input type="number" />
<input type="text" readonly value="px" class="unit"/>

Now make the second input borderless as,

.unit{
border: none;
border-color: transparent;
width: 15px;
}

answered Jun 12 '15 at 00:54

Saumil

2,521
5
32
54

score 0 · Answer 5 · answered Jun 12 '15 at 06:55

0

Please try following code

 <input type="number" />
<label id="label1">px</label>

We have consider Lable for FIX (px) value over here.

Please mark answer as right if helpful to you.

answered Jun 12 '15 at 06:55

Input with type=number but add alphabetical suffix

5 Answers5