Material Design Liteでセレクトメニュー(プルダウン)の作成方法
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を用いて可変(レスポンシブ)要素内での文字列を丸める方法可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ... 
- 
					
													  
- 
					レスポンシブ対応で右カラムのコンテンツを上に表示させる方法レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ... 
- 
					
													  
- 
					画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ... 
- 
					
													  
- 
					jQueryとCSSで指定したテキストに対してラインマーカーを引く方法サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ... 
- 
					
													  
- 
					CSSで親子関連のセレクターをネスト(入れ子)で指定する方法CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...