Pure.CSS输入大小调整表

简介

在设计 Web 表单时往往需要设置输入框的大小以使其更美观、匹配布局。Pure.CSS 是一款使用 CSS 让 Web 前端设计变得更高效、重复性更小的框架，其输入框组件也提供许多常见的样式，可以大大减少前端开发的工作量。本文将介绍 Pure.CSS 输入框组件中可用的大小调整选项及其对应的 CSS 类。

输入框大小调整选项

Pure.CSS 输入框组件提供以下四个大小调整选项：

• Small
• Default
• Medium
• Large

CSS 类名

可用的 CSS 类如下：

• .pure-input-1: 使用此类可创建一个小的 Pure.CSS 输入框。
• .pure-input-1-2: 使用此类可创建一个默认大小的 Pure.CSS 输入框。
• .pure-input-1-3: 使用此类可创建一个中等大小的 Pure.CSS 输入框。
• .pure-input-1-4: 使用此类可创建一个大的 Pure.CSS 输入框。

在使用这些 CSS 类时，需要将它们与 input 标签相结合，例如：<input type="text" class="pure-input-1">。

示例代码

以下是一个使用 Pure.CSS 输入框的示例，其中 input 标签使用了 .pure-input-1-2 类，它将创建一个默认大小的输入框。

<form class="pure-form">
    <fieldset>
        <legend>一个简单的 Pure.CSS 输入框示例</legend>
        <label for="name">名字</label>
        <input type="text" name="name" id="name" class="pure-input-1-2">
        <button type="submit" class="pure-button pure-button-primary">提交</button>
    </fieldset>
</form>

结论

Pure.CSS 的输入框组件提供了内置的大小调整选项，分别是 Small、Default、Medium 和 Large，可以帮助前端开发人员更高效地创建美观的表单。本文列出了可用的 CSS 类名以及一个简单的示例代码，读者可以基于此进行进一步的学习和开发。