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