The following modifiers are supported:
The following type attributes are supported:
type="text"
type="password"
type="email"
type="tel"
The following modifiers are supported:
The following type attributes are supported:
type="text"
type="password"
type="email"
type="tel"
<input class="input" type="text" placeholder="Text input">
<div class="field">
<div class="control">
<input class="input is-primary" type="text" placeholder="Primary input">
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-info" type="text" placeholder="Info input">
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-success" type="text" placeholder="Success input">
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-warning" type="text" placeholder="Warning input">
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-danger" type="text" placeholder="Danger input">
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-small" type="text" placeholder="Small input">
</div>
</div>
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Normal input">
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-medium" type="text" placeholder="Medium input">
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-large" type="text" placeholder="Large input">
</div>
</div>
<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>
You can resize the loading spinner by appending is-small
, is-medium
or is-large
to the control
container.
<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>
If you use the readonly
HTML attribute, the input will look similar to a normal one, but is not editable and has no shadow.
<div class="control">
<input class="input" type="text" value="This text is readonly" readonly>
</div>
If you also append the is-static
modifier, it removes the background, border, shadow, and horizontal padding, while maintaining the vertical spacing so you can easily align the input in any context, like a horizontal form.
<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>
You can append one of 2 modifiers on a control:
has-icons-left
has-icons-right
You also need to add a modifier on the icon:
icon is-left
if has-icons-left
is used
icon is-right
if has-icons-right
is used
The size of the input will define the size of the icon container.
<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>
If the control contains an icon, Elenore will make sure the icon remains centered, no matter the size of the input or of the icon.
<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>
You can use ` and `
From | To |
---|---|
$card | $card-color |
$card-background | $card-background-color |
$card-header | $card-header-color |
$dropdown-item | $dropdown-item-color |
$dropdown-content-background | $dropdown-content-background-color |
$dropdown-item-hover-background | $dropdown-item-hover-background-color |
$dropdown-item-hover | $dropdown-item-hover-color |
$dropdown-item-active-background | $dropdown-item-active-background-color |
$dropdown-item-active | $dropdown-item-active-color |
$dropdown-divider-background | $dropdown-divider-background-color |
$menu-item | $menu-item-color |
$menu-item-hover | $menu-item-hover-color |
$menu-item-hover-background | $menu-item-hover-background-color |
$menu-item-active | $menu-item-active-color |
$menu-item-active-background | $menu-item-active-background-color |
$menu-label | $menu-label-color |
$message-background | $message-background-color |
$message-header-background | $message-header-background-color |
$navbar-background | $navbar-background-color |
$navbar-item | $navbar-item-color |
$navbar-item-hover | $navbar-item-hover-color |
$navbar-item-hover-background | $navbar-item-hover-background-color |
$navbar-item-active | $navbar-item-active-color |
$navbar-item-active-background | $navbar-item-active-background-color |
$navbar-tab-hover-background | $navbar-tab-hover-background-color |
$navbar-tab-hover-border-bottom | $navbar-tab-hover-border-bottom-color |
$navbar-tab-active | $navbar-tab-active-color |
$navbar-tab-active-background | $navbar-tab-active-background-color |
$navbar-divider-background | $navbar-divider-background-color |
$navbar-dropdown-item-hover | $navbar-dropdown-item-hover-color |
$navbar-dropdown-item-hover-background | $navbar-dropdown-item-hover-background-color |
$navbar-dropdown-item-active | $navbar-dropdown-item-active-color |
$navbar-dropdown-item-active-background | $navbar-dropdown-item-active-background-color |
$pagination | $pagination-color |
$pagination-hover | $pagination-hover-color |
$pagination-hover-border | $pagination-hover-border-color |
$pagination-focus | $pagination-focus-color |
$pagination-focus-border | $pagination-focus-border-color |
$pagination-active | $pagination-active-color |
$pagination-active-border | $pagination-active-border-color |
$pagination-disabled | $pagination-disabled-color |
$pagination-disabled-background | $pagination-disabled-background-color |
$pagination-disabled-border | $pagination-disabled-border-color |
$pagination-current | $pagination-current-color |
$pagination-current-background | $pagination-current-background-color |
$pagination-current-border | $pagination-current-border-color |
$pagination-ellipsis | $pagination-ellipsis-color |
$box | $box-color |
$box-background | $box-background-color |
$button | $button-color |
$button-background | $button-background-color |
$button-border | $button-border-color |
$button-link | $button-link-color |
$button-link-hover-background | $button-link-hover-background-color |
$button-link-hover | $button-link-hover-color |
$button-disabled-background | $button-disabled-background-color |
$button-disabled-border | $button-disabled-border-color |
$button-static | $button-static-color |
$button-static-background | $button-static-background-color |
$button-static-border | $button-static-border-color |
$input | $input-color |
$input-background | $input-background-color |
$input-border | $input-border-color |
$input-hover | $input-hover-color |
$input-hover-border | $input-hover-border-color |
$input-focus | $input-focus-color |
$input-focus-border | $input-focus-border-color |
$input-disabled | $input-disabled-color |
$input-disabled-background | $input-disabled-background-color |
$input-disabled-border | $input-disabled-border-color |
$input-icon | $input-icon-color |
$input-icon-active | $input-icon-active-color |
$title | $title-color |
$subtitle | $subtitle-color |
$card-footer-border | $card-footer-border-top |
$menu-list-border | $menu-list-border-left |
$navbar-tab-hover-border | $navbar-tab-hover-border-bottom-color |
$navbar-tab-active-border | $navbar-tab-active-border-bottom |
$table-border | $table-cell-border |
$table-row-even-background | $table-striped-row-even-background-color |
$table-row-even-hover-background | $table-striped-row-even-hover-background-color |
Name | Default value |
---|---|
Name | Default value |
$input-color
|
$grey-darker
|
$input-background-color
|
$white
|
$input-border-color
|
$grey-lighter
|
$input-shadow
|
inset 0 1px 2px rgba($black, 0.1)
|
$input-hover-color
|
$grey-darker
|
$input-hover-border-color
|
$grey-light
|
$input-focus-color
|
$grey-darker
|
$input-focus-border-color
|
$link
|
$input-focus-box-shadow-size
|
0 0 0 0.125em
|
$input-focus-box-shadow-color
|
rgba($link, 0.25)
|
$input-disabled-color
|
$text-light
|
$input-disabled-background-color
|
$background
|
$input-disabled-border-color
|
$background
|
$input-arrow
|
$link
|
$input-icon-color
|
$grey-lighter
|
$input-icon-active-color
|
$grey
|
$input-radius
|
$radius
|
This page is open source. View on GitHub