戻る

チェックボックス

このサイトの仕様上、部品は目的の動作と異なることがあるので、ソースを活用してください。

チェックボックスのテーマを指定する

チェックボックス:
<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
		<legend>チェックボックス:</legend>
		<input type="checkbox" name="occupation" id="c1" data-theme="a">
		<label for="c1">スウォッチA</label>
		<input type="checkbox" name="occupation" id="c2" data-theme="b">
		<label for="c2">スウォッチB</label>
		<input type="checkbox" name="occupation" id="c3" data-theme="c">
		<label for="c3">スウォッチC</label>
		<input type="checkbox" name="occupation" id="c4" data-theme="d">
		<label for="c4">スウォッチD</label>
		<input type="checkbox" name="occupation" id="c5" data-theme="e">
		<label for="c5">スウォッチE</label>
	</fieldset>
</div>

ボタンを横に並べる

チェックボックス:
<div data-role="fieldcontain">
	<fieldset data-role="controlgroup" data-type="horizontal">
		<legend>チェックボックス:</legend>
		<input type="checkbox" name="occupation" id="c1" data-theme="a">
		<label for="c1">A</label>
		<input type="checkbox" name="occupation" id="c2" data-theme="b">
		<label for="c2">B</label>
		<input type="checkbox" name="occupation" id="c3" data-theme="c">
		<label for="c3">C</label>
		<input type="checkbox" name="occupation" id="c4" data-theme="d">
		<label for="c4">D</label>
		<input type="checkbox" name="occupation" id="c5" data-theme="e">
		<label for="c5">E</label>
	</fieldset>
</div>
inserted by FC2 system