常用表单元素ionic的CSS样式

2018-04-15 15:45:00
admin
原创
327
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title> </title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<style>
.content{
	height:800px;
	}

</style>
</head>
<body>
    
  <div class="bar bar-header">
    <div class="h1 title">表单</div>
  </div>

  <div class="content has-header">
	  <div class=list>
		  <label class="item item-input ">
			  <span class=input-label>姓:</span>
			  <input type=text placeholder="First Name">
		  </label>
		  <label class="item item-input ">
			  <span class=input-label>名:</span>
			  <i class="icon ion-search placeholder-icon"></i>&nbsp;&nbsp;
			  <input type=text placeholder="Last Name">
		  </label>
		  <label class="item item-toggle">
			  HTML5
			  <div class="toggle toggle-calm">
			  <input type=checkbox checked="">
			  <div class=track>
				  <div class=handle></div>
			  </div>
						  </div>		  
		</label>
		  <label class="item item-checkbox">
			  Javascript
			  <div class="checkbox">
			  <input type=checkbox checked="">
			  
						  </div>		  
		</label>
		<label class="item item-checkbox">
			  CSS
			  <div class="checkbox">
			  <input type=checkbox checked="">
			  
						  </div>		  
		</label>
		<label class="item item-radio">
			 <input type=radio name=sex value="male" checked="checked">
			 <div class="radio-content">
				 <div class="item-content">男</div>
				 <i class="radio-icon ion-checkmark"></i>
			</div>
		</label>
		<label class="item item-radio">
			 <input type=radio name=sex value="female" >
			 <div class="radio-content">
				 <div class="item-content">女</div>
				 <i class="radio-icon ion-checkmark"></i>
			</div>
		</label>
		<label class="item item-range">
			<div class="range">
				<i class="icon ion-volume-low"></i>
				<input type=range name=volume min=0 max=100 value=20>
				<i class="icon ion-volume-high"></i>
			</div>
		</label>
		<label class="item item-select">
			<div class="input-label">颜色</div>
			<select>
				<option>蓝色</option>
				<option>绿色</option>
				<option>红色</option>
			</select>
		</label>
	  </div>
	  <div class="padding">
		  <button class="button button-block button-positive">提交</button>
	  </div>
  </div>
	
</body>
</html>				
								
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227