Skip to content

输入框

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

基本使用

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

用户名
用户名验证失败

包含图标和按钮

前缀和后缀

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

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

用户名
有效身份证号码

尺寸

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

小号尺寸

用户名
有效身份证号码

默认尺寸

用户名
有效身份证号码

大号尺寸

用户名
有效身份证号码

外观类型

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

html
<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输入框前/后缀的大号宽度