How do I add text-based units like "lbs" floated to right inside of an input element (or outside of it)?

Question

Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.

Answer 1

You can use something like this.

Outside box:

<input></input><span style="margin-left:10px;">lb</span>

Inside box:

<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>

Fiddle

Answer 2

You can make use of bootstrap input-group component.

Note: The example below uses bootstrap 4 classes

<div class="input-group">
   <input type="number" class="form-control">
   <div class="input-group-append">
       <span class="input-group-text"> m </span>
   </div>
</div>

Here is the result below:

Answer 3

I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.

Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.

Example here:

https://jsfiddle.net/peg3mdsg/1/

Answer 4

Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :

HTML

<div class="input-group unity-input">
    <input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
            lbs
        </span>

</div> 

CSS

.input-group {
    top:40px;
    width:auto;
}
.unity-input .form-control {
    border-right:0!important;
}
.unity-input .input-group-addon {
    background:white!important;
    border-left:none!important;
    font-weight:bold;
    color:#333;
}

Fiddle

Answer 5

If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).

const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
  hiddenValue.innerHTML = input.value;
  // Only show units when there is a value?
  // unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});

.wrapper {
  position: relative;
  width: 80px;
}

#input {
  border: 2px solid #fee400;
  background-color: #373637;
  width: 100%;
  font-family: serif;
  font-size: 18px;
  line-height: 25px;
  font-weight: normal;
  padding: 3px 3px 3px 10px;
  color: white;
}

.units {
  position: absolute;
  top: 0;
  left: 0;
  right: 10px;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  
  /* Match input styles */
  font-family: serif;
  font-size: 18px;
  line-height: 25px;
  font-weight: normal;
  
  /* includes border width */
  padding: 5px 5px 5px 12px;
  color: white;
  opacity: 0.8;
}

.invisible {
  visibility: hidden;
}

#unitsValue {
  /* Support spaces */
  white-space: pre;
}

<div class="wrapper">
  <input id="input"type="number" value="12" />
  <div class="units">
    <span class="invisible" id="hiddenValue">12</span>
    <span class="units-value" id="unitsValue"> km</span>
  </div>
</div>

Answer 6

Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)

CSS:

#form>span {
    display: inline-block;
    padding-top: 5px;
    margin-left: -16px;
}
#form>input {
    padding: 5px 16px 5px 5px;
    float:left;
}

HTML:

<div id="form">
    <span class="units">lb</span>
    <input type="text" placeholder="Value" />
</div>

JSFiddle DEMO