ダウンロード

ここから始めましょう

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

入力

テキスト入力とそのバリエーション

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変数
値

Bulmaのサポート方法

一度きりの寄付

当社のスポンサーをご覧ください

月額寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#