視覚的に区別するために数値入力にテキスト接尾辞を追加する方法

数値入力にテキスト接尾辞を追加する

一般的なシナリオでは、数値入力は

<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: '%';
}

ログイン後にコピー

  



  



  
以上が視覚的に区別するために数値入力にテキスト接尾辞を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。