CSS를 사용하여 숫자 입력 필드에 단위 접미사를 추가하는 방법은 무엇입니까?

숫자 입력 필드에 텍스트 접미사를 추가하는 방법

다양한 입력 필드에서 예상되는 값을 사용자에게 명확하게 제공하기 위해 다음을 추가할 수 있습니다. 측정 단위를 나타내는 접미사. HTML과 CSS에서 이 작업을 수행하는 방법은 다음과 같습니다.

입력을 Div로 래핑

각 입력 요소를

래퍼를 생성합니다. 이렇게 하면 입력 필드와 함께 단위를 의사 요소로 배치할 수 있습니다.

단위 텍스트 배치

:after 의사 요소를 사용하여 래퍼 오른쪽에 있는 단위 텍스트입니다. 위치를 제어하려면 상단 및 오른쪽 속성으로 절대 위치를 설정하세요.

호버 및 포커스 관리

호버 또는 포커스에 나타나는 화살표를 설명하려면 오른쪽을 조정하세요. 속성에 따라 단위 텍스트를 왼쪽으로 더 이동합니다. 화살표가 항상 표시되는 Firefox와 같은 브라우저를 처리할 수도 있습니다.

단위 약어 설정

각 단위(예: ms, db, 퍼센트)에 대한 클래스를 생성하고 ::after 의사 요소의 콘텐츠로 적절한 약어를 할당합니다. 입력란 옆에 지정된 단위가 표시됩니다.

구현예

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

위 내용은 CSS를 사용하여 숫자 입력 필드에 단위 접미사를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.