输入框

通过鼠标或键盘输入内容，可以在输入框前后位置包含额外的文本或图标，通常用在表单、对话框上面。

基本使用

使用 input-control 类来获得输入框的外观和交互体验。

用户名

用户名验证失败

包含图标和按钮

前缀和后缀

通过结合类 has-prefix has-suffix 在输入框上添加前缀或后缀图标或字符。

除了预设的前 / 后缀宽度，还预设了其他两种尺寸，结合 has-prefix-* 和 has-suffix-* 类进行不同宽度展示。

用户名

有效身份证号码

尺寸

除了默认大小，输入框还提供了额外的 2 种预设尺寸。

小号尺寸

用户名

有效身份证号码

默认尺寸

用户名

有效身份证号码

大号尺寸

用户名

有效身份证号码

外观类型

配合使用CSS 工具类来实现不同输入框的外观。下面展示各种工具类的外观效果。

<div class="input-control">
  <input type="text" class="form-control circle" placeholder="请填写" />
</div>
<div class="input-control">
  <input type="text" class="form-control shadow" placeholder="请填写" />
</div>

CSS 类

输入框提供了如下 CSS 类：

类	类型	作用
input-control	实体类	元素作为输入框组件
input-control-prefix	工具类	输入框前缀元素样式
input-control-suffix	工具类	输入框后缀元素样式
has-prefix	工具类	标记输入框拥有前缀元素
has-suffix	工具类	标记输入框拥有后缀元素
has-prefix-icon	工具类	标记输入框拥有前缀图标
has-suffix-icon	工具类	标记输入框拥有后缀图标
size-sm	工具类	输入框使用小号尺寸
size-lg	工具类	输入框使用大号尺寸

CSS 变量

输入框提供了如下 CSS 变量，可进行全局修改。

CSS 变量名	作用
--input-fix-width	输入框前/后缀的默认宽度
--input-fix-width-sm	输入框前/后缀的小号宽度
--input-fix-width-lg	输入框前/后缀的大号宽度