시각적 차별화를 위해 숫자 입력에 텍스트 접미사를 추가하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

DDD

풀어 주다： 2024-10-29 20:16:30

원래의

351명이 탐색했습니다.

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

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

일반적인 시나리오에서 밀리초 단위로 값을 전달합니다. 그러나 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!