How to Add Text Suffixes to Number Inputs for Visual Differentiation?-CSS Tutorial-php.cn

How to Add Text Suffixes to Number Inputs for Visual Differentiation?

DDD

Release： 2024-10-29 20:16:30

Original

350 people have browsed it

How to Add Text Suffixes to Number Inputs for Visual Differentiation?

Appending Text Suffixes to Number Inputs

In a typical scenario, number inputs like convey a value in milliseconds. However, with multiple number inputs indicating values in dB or percentages, it becomes necessary to differentiate these values visually. Adding a text suffix clarifies the type of value represented.

Solution:

Utilize a wrapper

and position the unit as a pseudo-element ::after with the desired unit text.

Implementation:

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

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

/* Adjust unit position on hover and focus */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

/* Override for Firefox (arrows always shown) */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* Specify abbreviation for each unit class */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.percent::after {
  content: '%';
}</code>

Copy after login

<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>

Copy after login

The above is the detailed content of How to Add Text Suffixes to Number Inputs for Visual Differentiation?. For more information, please follow other related articles on the PHP Chinese website!