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
関連記事
-
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...
-
-
CSSで一つの要素に対して複数の背景色を指定する方法
1つのdiv要素に対して複数の背景色をつけたかった。background-col ...
-
-
CSSでfloatやmargin&widthは使わずにブロック要素の中央寄せ・右寄せする方法
CSSでブロック要素を中央寄せする場合はwidth指定しつつ「margin:0 ...
-
-
特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法
特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...
-
-
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...