如何使用 CSS 添加单位后缀到数字输入字段？

如何向数字输入字段添加文本后缀

为了让用户清楚地了解各种输入字段中的预期值，您可以附加表示测量单位的后缀。以下是如何在 HTML 和 CSS 中完成此操作：

将输入包裹在 Div 中

将每个输入元素括在

中。创建一个包装器。这将允许将单位作为伪元素定位在输入字段旁边。

定位单位文本

使用 ::after 伪元素，您可以放置包装器右侧的单位文本。使用 top 和 right 属性设置绝对定位来控制其位置。

管理悬停和焦点

要考虑悬停或焦点时出现的箭头，请调整右侧属性相应地将单位文本进一步向左移动。您还可以处理像 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中文网其他相关文章！