baserJSでセレクトボックスを装飾する

  • 0
    いいね
  • 0
    コメント
    この記事は最終更新日から1年以上が経過しています。

    コーポレートサイトにちょうどいいJavaScriptライブラリ baserJS の解説記事です。

    Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

    装飾のための要素を追加する

    input要素を装飾する場合、CSSのappearance: noneなどを使用すれば、ある程度の装飾はできますが、ブラウザの対応だったり、痒いところに手が届かなかったり、デザインによっては満足に実装できないケースがあります。

    baserJSのbcSelectメソッドは、実行するとセレクトボックスに対して、装飾のための要素を追加することができます。

    HTML

    <select name="pref" id="pref">
      <option selected>都道府県</option>
      <option value="1">北海道</option>
     . . .
      <option value="47">沖縄県</option>
    </select>
    

    JavaScript

    $('select').bcSelect();
    

    上記のJavaScriptを実行するとHTMLは以下のように変化します。

    付加されるクラス名は変更可能です。

    <span class="-bc-form-element -bc-wrapper -bc-form-select-wrapper -bc-wrapper--blur">
      <select name="pref" id="pref" class="-bc-element -bc-form-element -bc-form-select -bc-form-element--blur">
        <option selected="">都道府県</option>
        <option value="1">北海道</option>
        . . .
        <option value="47">沖縄県</option>
      </select>
      <label for="pref" class="-bc-form-element -bc-form-element__label -bc-form-select__label -bc-form-element__label--blur">
        <a href="#" class="-bc-form-element -bc-pseudo-select -bc-pseudo-select--blur">
          <span class="-bc-form-element -bc-pseudo-select__selected-display">都道府県</span>
          <ul class="-bc-form-element -bc-pseudo-select__option-list">
            <li class="-bc-form-element -bc-option-list__item -bc-option-list__item--selected" aria-selected="true">都道府県</li>
            <li class="-bc-form-element -bc-option-list__item -bc-option-list__item--unselected" aria-selected="false">北海道</li>
            . . .
            <li class="-bc-form-element -bc-option-list__item -bc-option-list__item--unselected" aria-selected="false">沖縄県</li>
          </ul>
        </a>
      </label>
    </span>
    

    状態変化

    要素の一部には自動でイベントが登録され、状態によって変化します。この変化を利用して、CSS側で装飾の変化を記述するとよいでしょう。

    フォーカス時のクラス

    • -bc-wrapper--blur ←→ -bc-wrapper--focus
    • -bc-form-element--blur ←→ -bc-form-element--focus
    • -bc-form-element__label--blur ←→ -bc-form-element__label--focus
    • -bc-pseudo-select--blur ←→ -bc-pseudo-select--focus

    選択時のクラス

    • -bc-option-list__item--unselected ←→ -bc-option-list__item--selected

    チェック時の属性

    • aria-selected="false" ←→ aria-selected="true"

    サンプル

    http://codepen.io/YusukeHirao/pen/wBMjbN