v7.1.0

Form

Table of Contents

Detail

フォーム装飾を作るエレメント CSS。

Basic

Type
Pattern
Role
Align
Other
<input class="input" type="text" name="text" placeholder="Text" />
SelectorDescription
.input入力フィールドの起点として使うセレクター。
ModifierDescription
.is-plain.input に付与すると塗りベースの入力欄になります。
.is-underline.input に付与すると下線のみの入力欄になります。
.is-inside.input に付与すると装飾の無い埋め込み用の入力欄になります。
ModifierDescription
.is-success.input に付与すると入力を成功した色味に変わります。
.is-danger.input に付与すると入力を失敗した色味に変わります。
.is-right.input に付与すると入力欄が右寄せに変わります。
.is-center.input に付与すると入力欄が中央寄せに変わります。
.is-left.input に付与すると入力欄が左寄せに変わります。
.is-round.input に付与すると角が完全に丸くなります。
[disabled].input に付与すると非活性になります。
[readonly].input に付与すると読み取り専用になります。

Textarea

Pattern
Role
Other
<textarea class="textarea" name="text"></textarea>
SelectorDescription
.textareaテキストエリアの起点として使うセレクター。
ModifierDescription
.is-plain.textarea に付与すると塗りベースの入力欄になります。
.is-underline.textarea に付与すると下線のみの入力欄になります。
.is-inside.textarea に付与すると装飾の無い埋め込み用の入力欄になります。
ModifierDescription
.is-success.textarea に付与すると入力を成功した色味に変わります。
.is-danger.textarea に付与すると入力を失敗した色味に変わります。
[disabled].textarea に付与すると非活性になります。
[readonly].textarea に付与すると読み取り専用になります。

File

Pattern
Role
Other
<label class="button is-plain">
  <span class="text">ファイル選択</span>
  <input class="input" type="file" name="file">
</label>
Warning

input[type="file"] はデフォルトスタイルがブラウザ毎に大きく異なり、尚且つ装飾が困難。レイアウト崩れの原因にもなりやすいため、Button に内包します。また、CSS のみではファイル名表示ができないため、実務では JavaScript を併用します。

Radio

ラジオボタンは、デフォルトの input[type="radio"] の機能を生かしたまま、CSS スタイリングのラジオボタンを使う手法を用いています。マークアップはデモを参考にしてください。

<div class="box is-flex is-space-right-md">
  <div class="box">
    <input class="input" id="radio-demo-1-1" type="radio" name="radio-demo-1" checked>
    <label class="label is-middle" for="radio-demo-1-1">
      <span class="radio is-margin-right-xxs"></span>
      <span class="text">むすびー</span>
    </label>
  </div>
  <div class="box">
    <input class="input" id="radio-demo-1-2" type="radio" name="radio-demo-1">
    <label class="label is-middle" for="radio-demo-1-2">
      <span class="radio is-margin-right-xxs"></span>
      <span class="text">むすびい</span>
    </label>
  </div>
  <div class="box">
    <input class="input" id="radio-demo-1-3" type="radio" name="radio-demo-1" disabled>
    <label class="label is-middle" for="radio-demo-1-3">
      <span class="radio is-margin-right-xxs"></span>
      <span class="text">むすび</span>
    </label>
  </div>
</div>
SelectorDescription
.labelラジオボタンの項目をラップして起点にするセレクター。
.radioCSS 製のラジオボタンを表示させる空セレクター。
.input[type="radio"]デフォルトタグを機能させつつ非表示にするセレクター。
ModifierDescription
.is-middle.label に付与すると直下要素が天地中央寄せになります。
.is-center.label に付与すると直下要素が左右中央寄せになります。
[checked].input[type="radio"] に付与すると選択済みになります。
.is-checked.radio に付与すると状態関係なく選択済みの装飾になります。
[disabled].input[type="radio"] に付与すると非活性になります。
.is-disabled.radio に付与すると状態関係なく非活性の装飾になります。

Checkbox

チェックボックスは、デフォルトの input[type="checkbox"] の機能を生かしたまま、CSS スタイリングのチェックボックスを使う手法を用いています。マークアップはデモを参考にしてください。

<div class="box is-flex is-space-right-md">
  <div class="box">
    <input class="input" id="checkbox-demo-1-1" type="checkbox" name="checkbox-demo-1" checked>
    <label class="label is-middle" for="checkbox-demo-1-1">
      <span class="checkbox is-margin-right-xxs"></span>
      <span class="text">むすびー</span>
    </label>
  </div>
  <div class="box">
    <input class="input" id="checkbox-demo-1-2" type="checkbox" name="checkbox-demo-1">
    <label class="label is-middle" for="checkbox-demo-1-2">
      <span class="checkbox is-margin-right-xxs"></span>
      <span class="text">むすびい</span>
    </label>
  </div>
  <div class="box">
    <input class="input" id="checkbox-demo-1-3" type="checkbox" name="checkbox-demo-1" disabled>
    <label class="label is-middle" for="checkbox-demo-1-3">
      <span class="checkbox is-margin-right-xxs"></span>
      <span class="text">むすび</span>
    </label>
  </div>
</div>
SelectorDescription
.labelチェックボックスの項目をラップして起点にするセレクター。
.checkboxCSS 製のチェックボックスを表示させる空セレクター。
.input[type="checkbox"]デフォルトタグを機能させつつ非表示にするセレクター。
ModifierDescription
.is-middle.label に付与すると直下要素が天地中央寄せになります。
.is-center.label に付与すると直下要素が左右中央寄せになります。
[checked].input[type="checkbox"] に付与すると選択済みになります。
.is-checked.checkbox に付与すると状態関係なく選択済みの装飾になります。
[disabled].input[type="checkbox"] に付与すると非活性になります。
.is-disabled.checkbox に付与すると状態関係なく非活性の装飾になります。

Select

セレクトボックスは、ラッパーとしての .select を用いることでブラウザ互換のある CSS スタイリングを実現しました。マークアップはデモを参考にしてください。

Pattern
Role
Other
<div class="select">
  <select>
    <option>Select A</option>
    <option>Select B</option>
    <option>Select C</option>
    <option>Select D</option>
    <option>Select E</option>
  </select>
</div>
SelectorDescription
.selectselect をラップしてセレクト装飾の起点にするセレクター。
select実際に動作するセレクト要素。
ModifierDescription
.is-plain.select に付与すると塗りベースの入力欄になります。
.is-underline.select に付与すると下線のみの入力欄になります。
.is-inside.select に付与すると装飾の無い埋め込み用の入力欄になります。
ModifierDescription
.is-success.select に付与すると入力を成功した色味に変わります。
.is-danger.select に付与すると入力を失敗した色味に変わります。
.is-round.select に付与すると角が完全に丸くなります。
[disabled]select に付与すると非活性になります。

Multiple

.select に .is-multiple、select に multiple 属性を付与することで、選択肢を複数表示させたセレクトボックスになります。

Pattern
Role
Other
<div class="select is-multiple">
  <select size="5" multiple>
    <option>Select A</option>
    <option>Select B</option>
    <option>Select C</option>
    <option>Select D</option>
    <option>Select E</option>
  </select>
</div>
ModifierDescription
.is-multiple.select に付与することで複数表示の装飾へ切り替えます。
[multiple]select に付与することでセレクトボックスが複数表示となります。

Fieldset

アクセシビリティの高いマークアップを行う際に、fieldset のデフォルトスタイルが邪魔になるかもしれません。.fieldset はそれをリセットするためだけのセレクターです。

フォームテキスト

<fieldset class="fieldset">
  <p class="text">フォームテキスト</p>
</fieldset>
SelectorDescription
.fieldsetfieldset のデフォルトスタイルをリセットするためのセレクター。

Button

汎用ボタン・リセット・送信ボタンは Button の装飾で対応できます。

Pattern
Other
<div class="box is-flex is-space-right-xs">
  <button class="button is-plain" type="button">ボタン</button>
  <button class="button is-plain is-primary" type="button">ボタン</button>
</div>
<div class="box is-flex is-space-right-xs">
  <button class="button is-plain" type="reset">リセット</button>
  <button class="button is-plain is-warning" type="reset">リセット</button>
  <button class="button is-plain is-danger" type="reset">リセット</button>
</div>
<div class="box is-flex is-space-right-xs">
  <button class="button is-plain is-primary" type="submit">送信</button>
  <button class="button is-plain is-success" type="submit">送信</button>
</div>

Variables

CSS Variables
Name
Default Value
Compiled Value
  • Name
    $selector-form-input
    Default Value
    .input
    Compiled Value
    .input
  • Name
    $selector-form-textarea
    Default Value
    .textarea
    Compiled Value
    .textarea
  • Name
    $selector-form-label
    Default Value
    .label
    Compiled Value
    .label
  • Name
    $selector-form-radio
    Default Value
    .radio
    Compiled Value
    .radio
  • Name
    $selector-form-checkbox
    Default Value
    .checkbox
    Compiled Value
    .checkbox
  • Name
    $selector-form-select
    Default Value
    .select
    Compiled Value
    .select
  • Name
    $selector-form-select-core
    Default Value
    select
    Compiled Value
    select
  • Name
    $selector-form-fieldset
    Default Value
    .fieldset
    Compiled Value
    .fieldset
  • Name
    $modifier-form-success
    Default Value
    .is-success
    Compiled Value
    .is-success
  • Name
    $modifier-form-danger
    Default Value
    .is-danger
    Compiled Value
    .is-danger
  • Name
    $modifier-form-round
    Default Value
    .is-round
    Compiled Value
    .is-round
  • Name
    $modifier-form-plain
    Default Value
    .is-plain
    Compiled Value
    .is-plain
  • Name
    $modifier-form-underline
    Default Value
    .is-underline
    Compiled Value
    .is-underline
  • Name
    $modifier-form-inside
    Default Value
    .is-inside
    Compiled Value
    .is-inside
  • Name
    $modifier-form-right
    Default Value
    .is-right
    Compiled Value
    .is-right
  • Name
    $modifier-form-center
    Default Value
    .is-center
    Compiled Value
    .is-center
  • Name
    $modifier-form-left
    Default Value
    .is-left
    Compiled Value
    .is-left
  • Name
    $modifier-form-middle
    Default Value
    .is-middle
    Compiled Value
    .is-middle
  • Name
    $modifier-form-checked
    Default Value
    .is-checked
    Compiled Value
    .is-checked
  • Name
    $modifier-form-disabled
    Default Value
    .is-disabled
    Compiled Value
    .is-disabled
  • Name
    $modifier-form-multiple
    Default Value
    .is-multiple
    Compiled Value
    .is-multiple
  • Name
    $input-height
    Default Value
    2.5em
    Compiled Value
    2.5em
  • Name
    $input-padding
    Default Value
    0.5em 0.75em
    Compiled Value
    0.5em 0.75em
  • Name
    $input-background-color
    Default Value
    $convert-background-1
    Compiled Value
    white
  • Name
    $input-border-width
    Default Value
    $global-border-width
    Compiled Value
    1px
  • Name
    $input-border-color
    Default Value
    $convert-border
    Compiled Value
    #d1d8dc
  • Name
    $input-border-radius
    Default Value
    $radius-xs
    Compiled Value
    2px
  • Name
    $input-line-height
    Default Value
    $line-height-md
    Compiled Value
    1.5
  • Name
    $input-shadow
    Default Value
    $global-inset-shadow-size $convert-shadow-alpha-thin
    Compiled Value
    inset 0 1px 1px rgba(0, 0, 0, 0.075)
  • Name
    $input-transition
    Default Value
    $global-transition
    Compiled Value
    ease-out 0.12s
  • Name
    $input-placeholder-color
    Default Value
    $convert-input-placeholder-color
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $input-disabled-background-color
    Default Value
    $convert-disabled-background-color
    Compiled Value
    #bdbdbd
  • Name
    $input-disabled-border-color
    Default Value
    $convert-disabled-border-color
    Compiled Value
    #eef0f2
  • Name
    $input-disabled-shadow
    Default Value
    $global-inset-shadow-size $convert-shadow-alpha-thin
    Compiled Value
    inset 0 1px 1px rgba(0, 0, 0, 0.075)
  • Name
    $input-disabled-color
    Default Value
    $convert-disabled-color
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $input-readonly-background-color
    Default Value
    $convert-background-2
    Compiled Value
    whitesmoke
  • Name
    $input-readonly-border-color
    Default Value
    $convert-border
    Compiled Value
    #d1d8dc
  • Name
    $input-readonly-shadow
    Default Value
    $global-inset-shadow-size $convert-shadow-alpha-thin
    Compiled Value
    inset 0 1px 1px rgba(0, 0, 0, 0.075)
  • Name
    $input-readonly-color
    Default Value
    $convert-body-color
    Compiled Value
    rgba(0, 0, 0, 0.7)
  • Name
    $input-focus-border-color
    Default Value
    $convert-focus-darken
    Compiled Value
    #0f7dd2
  • Name
    $input-focus-shadow
    Default Value
    $global-inset-shadow-size $convert-shadow-alpha-thin, $global-focus-shadow-size $convert-focus-alpha-thin
    Compiled Value
    inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(36, 151, 240, 0.36)
  • Name
    $input-round-border-radius
    Default Value
    $radius-full
    Compiled Value
    999em
  • Name
    $input-plain-background-color
    Default Value
    $convert-background-2
    Compiled Value
    whitesmoke
  • Name
    $input-plain-border-color
    Default Value
    transparent
    Compiled Value
    transparent
  • Name
    $input-plain-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha-thin
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.36)
  • Name
    $input-underline-padding-left
    Default Value
    0
    Compiled Value
    0
  • Name
    $input-underline-padding-right
    Default Value
    0
    Compiled Value
    0
  • Name
    $input-underline-border-width
    Default Value
    $global-border-width
    Compiled Value
    1px
  • Name
    $input-underline-border-color
    Default Value
    $convert-border
    Compiled Value
    #d1d8dc
  • Name
    $input-inside-padding
    Default Value
    0.5em 0.75em
    Compiled Value
    0.5em 0.75em
  • Name
    $input-success-background-color
    Default Value
    $convert-input-success-background-color
    Compiled Value
    #dbf5db
  • Name
    $input-success-border-color
    Default Value
    $convert-input-success-border-color
    Compiled Value
    #7edd7e
  • Name
    $input-danger-background-color
    Default Value
    $convert-input-danger-background-color
    Compiled Value
    #fbeaea
  • Name
    $input-danger-border-color
    Default Value
    $convert-input-danger-border-color
    Compiled Value
    #eeafaf
  • Name
    $textarea-padding
    Default Value
    calc(0.5em - 1.5px) 0.5em
    Compiled Value
    calc(0.5em - 1.5px) 0.5em
  • Name
    $radio-size
    Default Value
    1em
    Compiled Value
    1em
  • Name
    $radio-border-width
    Default Value
    $global-border-width * 2
    Compiled Value
    2px
  • Name
    $radio-background-color
    Default Value
    $convert-background
    Compiled Value
    white
  • Name
    $radio-transition
    Default Value
    $global-transition
    Compiled Value
    ease-out 0.12s
  • Name
    $radio-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha-thin
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.36)
  • Name
    $radio-before-checked-background-color
    Default Value
    $convert-primary-strong
    Compiled Value
    #37b0be
  • Name
    $radio-checked-border-color
    Default Value
    $convert-primary-strong
    Compiled Value
    #37b0be
  • Name
    $checkbox-size
    Default Value
    1em
    Compiled Value
    1em
  • Name
    $checkbox-border-width
    Default Value
    $global-border-width * 2
    Compiled Value
    2px
  • Name
    $checkbox-border-radius
    Default Value
    $radius-xs
    Compiled Value
    2px
  • Name
    $checkbox-background-color
    Default Value
    $convert-background
    Compiled Value
    white
  • Name
    $checkbox-transition
    Default Value
    $global-transition
    Compiled Value
    ease-out 0.12s
  • Name
    $checkbox-focus-border-color
    Default Value
    $convert-focus-darken
    Compiled Value
    #0f7dd2
  • Name
    $checkbox-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha-thin
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.36)
  • Name
    $checkbox-before-border-color
    Default Value
    $convert-checkbox-before-border-color
    Compiled Value
    white
  • Name
    $checkbox-checked-background-color
    Default Value
    $convert-primary
    Compiled Value
    #37b0be
  • Name
    $checkbox-checked-border-color
    Default Value
    $convert-primary
    Compiled Value
    #37b0be
  • Name
    $select-angle-size
    Default Value
    0.5em
    Compiled Value
    0.5em
  • Name
    $select-angle-border-width
    Default Value
    $global-border-width * 2
    Compiled Value
    2px
  • Name
    $select-angle-border-color
    Default Value
    $convert-border-1
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $select-transition
    Default Value
    $global-transition
    Compiled Value
    ease-out 0.12s
  • Name
    $select-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha-thin
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.36)

Mixins

  • musubii-style-form-input()
  • musubii-style-form-textarea()
  • musubii-style-form-input-disabled()
  • musubii-style-form-input-readonly()
  • musubii-style-form-input-right()
  • musubii-style-form-input-center()
  • musubii-style-form-input-left()
  • musubii-style-form-input-success()
  • musubii-style-form-input-danger()
  • musubii-style-form-input-round()
  • musubii-style-form-input-plain()
  • musubii-style-form-input-plain-disabled()
  • musubii-style-form-input-plain-success()
  • musubii-style-form-input-plain-danger()
  • musubii-style-form-input-underline()
  • musubii-style-form-input-underline-disabled()
  • musubii-style-form-input-underline-success()
  • musubii-style-form-input-underline-danger()
  • musubii-style-form-input-inside()
  • musubii-style-form-input-inside-disabled()
  • musubii-style-form-input-inside-success()
  • musubii-style-form-input-inside-danger()
  • musubii-style-form-input-file()
  • musubii-style-form-label()
  • musubii-style-form-label-middle()
  • musubii-style-form-label-center()
  • musubii-style-form-radio()
  • musubii-style-form-radio-core()
  • musubii-style-form-radio-focus()
  • musubii-style-form-radio-checkbox()
  • musubii-style-form-radio-disabled()
  • musubii-style-form-radio-label-disabled()
  • musubii-style-form-checkbox()
  • musubii-style-form-checkbox-core()
  • musubii-style-form-checkbox-focus()
  • musubii-style-form-checkbox-checkbox()
  • musubii-style-form-checkbox-disabled()
  • musubii-style-form-checkbox-label-disabled()
  • musubii-style-form-select()
  • musubii-style-form-select-angle()
  • musubii-style-form-select-core()
  • musubii-style-form-select-core-angle-fix()
  • musubii-style-form-select-core-disabled()
  • musubii-style-form-select-core-readonly()
  • musubii-style-form-select-core-success()
  • musubii-style-form-select-core-danger()
  • musubii-style-form-select-round()
  • musubii-style-form-select-core-plain()
  • musubii-style-form-select-core-plain-disabled()
  • musubii-style-form-select-core-plain-success()
  • musubii-style-form-select-core-plain-danger()
  • musubii-style-form-select-core-underline()
  • musubii-style-form-select-core-underline-disabled()
  • musubii-style-form-select-core-underline-success()
  • musubii-style-form-select-core-underline-danger()
  • musubii-style-form-select-core-inside()
  • musubii-style-form-select-core-inside-disabled()
  • musubii-style-form-select-core-inside-angle-fix()
  • musubii-style-form-select-core-inside-success()
  • musubii-style-form-select-core-inside-danger()
  • musubii-style-form-select-core-multiple()
  • musubii-style-form-fieldset()

Sources