セレクトメニュー-select menu




 ①セレクトメニュー - select menu  ☆ソース <label for="select1" class="select">武器を選択してください:</label> <select name="select" id="select1"> <option value="1">片手剣</option> <option value="2">大剣</option> <option value="3">ハンマー</option> <option value="4">ガンランス</option> </select> labelのforとinputのidを一致させます(ここではselect1)。

 デモ


 ②複数セレクトボックス - select menu group  ☆ソース <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>生年月日:</legend> <label for="select-year">年</label> <select name="select-year" id="select-year"> <option>年</option> <option value="1">1999年</option> <option value="2">2112年</option> </select> <label for="select-month">月</label> <select name="select-month" id="select-month"> <option>月</option> <option value="3">7月</option> <option value="4">9月</option> </select> <label for="select-day">日</label> <select name="select-day" id="select-day"> <option>日</option> <option value="5">31日</option> <option value="6">3日</option> </select> </fieldset> </div>  デモ
生年月日:


 ③横方向複数セレクトボックス - select menu group horizontal  ☆ソース <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>生年月日:</legend> <label for="select-year">年</label> <select name="select-year" id="select-year"> <option>年</option> <option value="1">1999年</option> <option value="2">2112年</option> </select> <label for="select-month">月</label> <select name="select-month" id="select-month"> <option>月</option> <option value="3">7月</option> <option value="4">9月</option> </select> <label for="select-day">日</label> <select name="select-day" id="select-day"> <option>日</option> <option value="5">31日</option> <option value="6">3日</option> </select> </fieldset> </div>  デモ
生年月日:


 ④テーマ適用セレクトボックス - select menu data theme  ☆ソース <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>生年月日:</legend> <label for="select-year">年</label> <select name="select-year" id="select-year" data-native-menu="false"> <option>年</option> <option value="1">1999年</option> <option value="2">2112年</option> </select> <label for="select-month">月</label> <select name="select-month" id="select-month" data-native-menu="false"> <option>月</option> <option value="3">7月</option> <option value="4">9月</option> </select> <label for="select-day">日</label> <select name="select-day" id="select-day" data-native-menu="false"> <option>日</option> <option value="5">31日</option> <option value="6">3日</option> </select> </fieldset> </div>  デモ
生年月日: