セレクトメニュー-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>
デモ