더 나은 사용자 이해를 위해 CSS를 사용하여 숫자 입력에 사용자 정의 텍스트 접미사를 추가하려면 어떻게 해야 합니까?

사용자 정의 텍스트 접미사로 숫자 입력 향상

밀리초, dB 및 백분율로 값을 나타내는 숫자 입력이 여러 개 있습니다. 사용자의 이해를 높이기 위해 이러한 입력에 측정 단위를 나타내는 유형 접미사를 추가하려고 합니다.

CSS 래퍼 및 의사 요소를 사용한 솔루션

입력 요소 자체에서는 CSS 래퍼와 의사 요소를 사용하여 원하는 결과를 얻을 수 있습니다.

1. 각 입력에 대한 래퍼 div 만들기:

   • 이 div는 텍스트 접미사를 배치하고 레이아웃을 방해하지 않도록 합니다.

2. 접미사를 의사 요소(:: after):

   • 위치를 절대값으로 설정하여 래퍼 div 외부에서 부동할 수 있도록 합니다.
   • 지정된 오프셋에 배치합니다(예: 오른쪽: 0.5em). 입력에 맞춰 정렬합니다.

3. 마우스를 올리거나 초점을 맞추는 경우 위치를 조정합니다.

   • 마우스를 올리거나 초점을 맞추는 동안 래퍼에서는 접미사를 약간 더 멀리 이동합니다(예: 오른쪽: 1.5em). 이는 일부 브라우저의 화살표 버튼을 수용합니다.

4. 사용자 정의 접미사 제공:

   • 각 단위에 대해 별도의 CSS 클래스 사용( 예: .ms, .db, .percent).
   • 원하는 접미사(예: 'ms', 'db', '%')를 표시하도록 각 클래스 내 의사 요소의 콘텐츠 속성을 설정합니다.

예제 코드:

<code class="css">div {
  display: inline-block;
  position: relative;
}
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}
.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>

이제 숫자 입력에 유형 접미사가 표시되어 명확성이 향상되고 사용자 이해.

위 내용은 더 나은 사용자 이해를 위해 CSS를 사용하여 숫자 입력에 사용자 정의 텍스트 접미사를 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!