How to Add Unit Suffixes to Number Input Fields with CSS?

How to Add Text Suffixes to Number Input Fields

To provide users with clarity on the values expected in various input fields, you can append suffixes indicating the units of measurement. Here's how to accomplish this in HTML and CSS:

Wrap Inputs in a Div

Enclose each input element within a

to create a wrapper. This will allow for positioning the unit as a pseudo element alongside the input field.

Position the Unit Text

Using the ::after pseudo element, you can place the unit text to the right of the wrapper. Set absolute positioning with top and right properties to control its location.

Manage Hover and Focus

To account for the arrows that appear on hover or focus, adjust the right property accordingly to move the unit text further to the left. You can also handle browsers like Firefox, where arrows are always shown.

Set Unit Abbreviations

Create classes for each unit (e.g., ms, db, percent) and assign the appropriate abbreviations as content for the ::after pseudo element. This will display the designated units next to the input fields.

Example Implementation

<code class="css">/* Wrapper element */
div {
  display: inline-block;
  position: relative;
}

/* Unit positioning */
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

/* Hover/focus adjustments */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

/* Firefox handling */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* Unit abbreviations */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.percent::after {
  content: '%';
}</code>

<code class="html"><div class="ms">
  <input type="number" id="milliseconds">
</div>

<hr>

<div class="db">
  <input type="number" id="decibel">
</div>

<hr>

<div class="percent">
  <input type="number" id="percentages">
</div></code>

The above is the detailed content of How to Add Unit Suffixes to Number Input Fields with CSS?. For more information, please follow other related articles on the PHP Chinese website!