시각적 차별화를 위해 숫자 입력에 텍스트 접미사를 추가하는 방법은 무엇입니까?

숫자 입력에 텍스트 접미사 추가

일반적인 시나리오에서 밀리초 단위로 값을 전달합니다. 그러나 dB 또는 백분율로 값을 나타내는 여러 숫자 입력의 경우 이러한 값을 시각적으로 구별하는 것이 필요합니다. 텍스트 접미사를 추가하면 표시되는 값의 유형이 명확해집니다.

해결책:

래퍼

원하는 단위 텍스트를 사용하여 단위를 의사 요소 ::after로 배치합니다.

구현:

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

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

위 내용은 시각적 차별화를 위해 숫자 입력에 텍스트 접미사를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!