ionic.css界面組件：表單-複選按鈕

和開關同樣，複選按鈕也是基於HTML的checkbox input實現的。使用以下的HTML模板聲明覆選按鈕。用法：

<any class="item-input">
    <any class="checkbox">
        <input type="checkbox">
    </any>
</any>

複選按鈕的配色方案樣式爲：.checkbox-{color}。

<label class="checkbox checkbox-dark" >
    <input type="checkbox" checked>
</label>

將上代碼放在 .item-checkbox裏面，可定定複選框的位置：

//ionic.css源碼
.item-checkbox .checkbox {
  position: absolute;
  top: 50%;
  right: 8px;
  left: 8px;
  z-index: 3;
  margin-top: -21px; }

綜上實例：

<div class="scroll-content has-header">
	<ul class="list">
	
		<li class="item item-checkbox item-button-right">
			<label class="checkbox">
				<input type="checkbox">
			</label>
			<h2>Shopping</h2>
			<p>Due tommorow</p>
                        <a class="button button-clear icon ion-ios-arrow-right"></a>
		</li>
			
		<li class="item item-checkbox  item-button-right">
			<label class="checkbox">
				<input type="checkbox" checked>
			</label>
			<h2>Moving house checklist</h2>
             	        <a class="button button-clear icon ion-ios-arrow-right"></a>
		</li>
		
		<li class="item item-checkbox  item-button-right">
			<label class="checkbox">
				<input type="checkbox">
			</label>
			<h2>Holiday destinations</h2>
             	        <a class="button button-clear icon ion-ios-arrow-right"></a>
		</li>
		
		<li class="item item-checkbox  item-button-right">
			<label class="checkbox">
				<input type="checkbox">
			</label>
			<h2>App ideas</h2>
             	        <a class="button button-clear icon ion-ios-arrow-right"></a>
		</li>
	</ul>
</div>
<div class="bar bar-footer bar-positive">
	<div class="button-bar">
		<a class="button">All</a>
		<a class="button">Done</a>
		<a class="button">Completed</a>
	</div>
</div>