CODEWITHSUNDEEP
formsunits-of-measurement
Florimond
Florimond

Reputation: 67

Units associated to number input

I need to manage units associated to number input in html forms.

Forms are generated from xml files (that I can change if necessary) :

Voltage : <input type="number"/> V

Some layout may visually separate unit (V) from input : I want them to be tied together.

Ideally, unit is displaied inside the input, like an always visible placeholder.

I thought about using pseudo-element ::after but

In case you weren’t aware, an doesn’t allow ::before or ::after pseudo elements. None of the different input types do. https://www.scottohara.me/blog/2014/06/24/pseudo-element-input.html

Does anyone have a good practise to easily support this ? (html or css)

Upvotes: 0

Views: 99

Answers (1)

Manokha
Manokha

Reputation: 279

This should give you a head start :

.input-with-unit {
  white-space: nowrap;
}
.input-with-unit > input {
  width: 100%;
  padding-right: 2rem;
}
.input-with-unit > label {
  position: absolute;
  margin-left: -1rem;
  margin-top: 0.125rem;
}
<div class="input-with-unit" style="width: 12rem;">
  <input type="number" />
  <label>V</label>
</div>
<div class="input-with-unit" style="width: 9rem;">
  <input type="number" />
  <label>A</label>
</div>

Upvotes: 1

Related Questions