如何使用 CSS 将自定义文本后缀添加到数字输入以便更好地用户理解？-css教程-PHP中文网

如何使用 CSS 将自定义文本后缀添加到数字输入以便更好地用户理解？

Linda Hamilton

发布： 2024-10-27 10:29:30

原创

676 人浏览过

How can I add custom text suffixes to number inputs using CSS for better user comprehension?

使用自定义文本后缀增强数字输入

您有多个数字输入，表示以毫秒、dB 和百分比为单位的值。为了增强用户的理解，您需要向这些输入添加类型后缀，指示测量单位。

使用 CSS 包装器和伪元素的解决方案

而不是修改输入元素本身，您可以使用 CSS 包装器和伪元素来实现所需的结果：

为每个输入创建一个包装器 div：
- 此 div 将定位文本后缀并确保它不会破坏布局。
将后缀定位为伪元素 (:: after):
- 将其位置设置为绝对，允许其浮动在包装器 div 之外。
- 将其放置在指定的偏移处（例如，右：0.5em）与输入对齐。
调整悬停或聚焦时的位置：
- 悬停或聚焦时包装纸，将后缀稍微移远一些（例如，右：1.5em）。这可以容纳某些浏览器中的箭头按钮。
提供自定义后缀：
- 为每个单元使用单独的 CSS 类（例如，.ms、.db、.percent)。
- 设置每个类中伪元素的 content 属性以显示所需的后缀（例如，'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中文网其他相关文章！