勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Material Design Liteでセレクトメニュー(プルダウン)の作成方法

  CSS

Material Design Liteでformのセレクトメニュー(プルダウン)の作成したかったが、公式ページからセレクトメニューが見つけられなかった。調べたところ作成自体は可能なようなので作成方法及びサンプルをメモ。

 

サンプル

https://taitan916.info/sample/mdl/select_menu/

 

作成方法

ソースコード

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <select class="mdl-textfield__input" id="food" name="food">
        <option></option>
        <option value="カレー">カレー</option>
        <option value="寿司">寿司</option>
        <option value="ラーメン">ラーメン</option>
        <option value="すき焼き">すき焼き</option>
        <option value="ハンバーグ">ハンバーグ</option>
    </select>
    <label class="mdl-textfield__label" for="food">好きな食べ物</label>
</div>

 

参考サイト

https://stackoverflow.com/questions/31307764/how-to-format-select-box-with-material-design-lite

 - CSS

  関連記事

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法

特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...

スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...