输入框（Input）

文本输入框和它的变体

Bulma 的 input CSS 类是针对 HTML 元素 <input> 的，支持下列类型属性：

  • type="text"
  • type="password"
  • type="email"
  • type="tel"

支持的修饰符可能影响： 

<input class="input" type="text" placeholder="Text input">

颜色 #

示例

HTML 

<input class="input is-primary" type="text" placeholder="Primary input">

示例

HTML 

<input class="input is-link" type="text" placeholder="Link 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 and static inputs

如果您使用 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="me@example.com" 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 图标 #

您可以在控件上添加两个修饰符之一：

  • has-icons-left
  • 和/或 has-icons-right

您还需要添加一个修饰符在 icon上：

  • 如果用 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>

Variables #

Name
Type
Value
Computed Value
Computed Type 
$input-color
variable
$grey-darker
hsl(0, 0%, 21%)
color
$input-background-color
variable
$white
hsl(0, 0%, 100%)
color
$input-border-color
variable
$grey-lighter
hsl(0, 0%, 86%)
color
$input-shadow
size
inset 0 1px 2px rgba($black, 0.1)
$input-hover-color
variable
$grey-darker
hsl(0, 0%, 21%)
color
$input-hover-border-color
variable
$grey-light
hsl(0, 0%, 71%)
color
$input-focus-color
variable
$grey-darker
hsl(0, 0%, 21%)
color
$input-focus-border-color
variable
$link
hsl(217, 71%,  53%)
color
$input-focus-box-shadow-size
size
0 0 0 0.125em
$input-focus-box-shadow-color
color
rgba($link, 0.25)
$input-disabled-color
variable
$text-light
hsl(0, 0%, 48%)
color
$input-disabled-background-color
variable
$background
hsl(0, 0%, 96%)
color
$input-disabled-border-color
variable
$background
hsl(0, 0%, 96%)
color
$input-arrow
variable
$link
hsl(217, 71%,  53%)
color
$input-icon-color
variable
$grey-lighter
hsl(0, 0%, 86%)
color
$input-icon-active-color
variable
$grey
hsl(0, 0%, 48%)
color
$input-radius
variable
$radius
4px
size

Made with Bulma 此页面为开放源码页面。 发现排版问题？或者表达模糊？
在 GitHub 改进该页内容

支持 Bulma 😃

一次性捐献

访问我们的赞助商

Stock APIs kasinohai casinoutanlicens

按月捐献

成为赞助商
#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布！