Bulma input CSS 类适用于 <input> HTML 元素。支持以下 type 属性
type="text"type="password"type="email"type="tel"
支持影响以下内容的若干修饰符
赞助商
输入
文本输入及其变体
<input class="input" type="text" placeholder="Text input" />颜色 #
示例
HTML
<input
class="input is-link"
type="text"
placeholder="Link input"
/>示例
HTML
<input
class="input is-primary"
type="text"
placeholder="Primary input"
/>示例
HTML
<input
class="input is-info"
type="text"
placeholder="Info input"
/>示例
HTML
<input
class="input is-success"
type="text"
placeholder="Success input"
/>示例
HTML
<input
class="input is-warning"
type="text"
placeholder="Warning input"
/>示例
HTML
<input
class="input is-danger"
type="text"
placeholder="Danger input"
/>尺寸 #
示例
HTML
<input
class="input is-small"
type="text"
placeholder="Small input"
/>示例
HTML
<input
class="input is-normal"
type="text"
placeholder="Normal input"
/>示例
HTML
<input
class="input is-medium"
type="text"
placeholder="Medium input"
/>示例
HTML
<input
class="input is-large"
type="text"
placeholder="Large input"
/>样式 #
<input class="input is-rounded" type="text" placeholder="Rounded input" />状态 #
正常
<div class="control">
<input class="input" type="text" placeholder="Normal input" />
</div>悬停
<div class="control">
<input class="input is-hovered" type="text" placeholder="Hovered input" />
</div>焦点
<div class="control">
<input class="input is-focused" type="text" placeholder="Focused input" />
</div>加载
<div class="control is-loading">
<input class="input" type="text" placeholder="Loading input" />
</div>
可以通过向 control 容器追加 is-small、is-medium 或 is-large 来调整加载指示符的大小。
<div class="field">
<div class="control is-small is-loading">
<input
class="input is-small"
type="text"
placeholder="Small loading input"
/>
</div>
</div>
<div class="field">
<div class="control is-loading">
<input class="input" type="text" placeholder="Normal loading input" />
</div>
</div>
<div class="field">
<div class="control is-medium is-loading">
<input
class="input is-medium"
type="text"
placeholder="Medium loading input"
/>
</div>
</div>
<div class="field">
<div class="control is-large is-loading">
<input
class="input is-large"
type="text"
placeholder="Large loading input"
/>
</div>
</div>禁用
<div class="control">
<input class="input" type="text" placeholder="Disabled input" disabled />
</div>只读和静态输入
如果你使用 readonly HTML 属性，输入看起来将类似于正常输入，但不可编辑且没有阴影。
<div class="control">
<input class="input" type="text" value="This text is readonly" readonly />
</div>
如果你还追加 is-static 修饰符，它将移除背景、边框、阴影和水平填充，同时保持垂直间距，以便你可以在任何上下文中轻松对齐输入，例如水平表单。
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">From</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input
class="input is-static"
type="email"
value="[email protected]"
readonly
/>
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">To</label>
</div>
<div class="field-body">
<div class="field">
<p class="control">
<input class="input" type="email" placeholder="Recipient email" />
</p>
</div>
</div>
</div>使用 Font Awesome 图标 #
你可以在控件上追加 2 个修饰符之一
-
has-icons-left - 和/或
has-icons-right
你还需要在图标上添加修饰符
- 如果使用了
has-icons-left，则为icon is-left - 如果使用了
has-icons-right，则为icon is-right
输入的大小将定义图标容器的大小。
<div class="field">
<p class="control has-icons-left has-icons-right">
<input class="input" type="email" placeholder="Email" />
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</p>
</div>
<div class="field">
<p class="control has-icons-left">
<input class="input" type="password" placeholder="Password" />
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>如果控件包含图标，Bulma 将确保图标保持居中，无论输入或图标的大小如何。
<div class="control has-icons-left has-icons-right">
<input class="input is-small" type="email" placeholder="Email" />
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div><div class="control has-icons-left has-icons-right">
<input class="input" type="email" placeholder="Email" />
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div><div class="control has-icons-left has-icons-right">
<input class="input is-medium" type="email" placeholder="Email" />
<span class="icon is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-right">
<i class="fas fa-check"></i>
</span>
</div><div class="control has-icons-left has-icons-right">
<input class="input is-large" type="email" placeholder="Email" />
<span class="icon is-medium is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-medium is-right">
<i class="fas fa-check"></i>
</span>
</div>|
Sass 变量
|
CSS 变量
|
值
|
|---|
Sass 和 CSS 变量 #
|
Sass 变量
|
CSS 变量
|
值
|
|---|