css实现手机端银行卡实名认证表单h5页面效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现手机端银行卡实名认证表单h5页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>*{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;}
body{width: 100%;overflow-x: hidden;}
img{vertical-align: middle;max-width: 100%;}
a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color: transparent;outline:none;text-decoration: none;
}
.wfull{width: 100%;}
.hidden{display: none;}
.block{display: block;}
.bg-warning{background: #fbcdad;color: #FFFFFF;}
.btn{height: .9rem;line-height: .9rem;text-align: center;font-size: .32rem;border-radius: .15rem;outline: none;}
.container{position: relative;}
.nav-bar{position: relative;height: .88rem;line-height: .88rem;width: 100%;text-align: center;font-size: .36rem;color: #222222;border-bottom: 1px solid #eeeeee;}
.nav-bar .back{background: url(../images/arrow-left.png) center left no-repeat;position: absolute;top: 0;left: .33rem;height: 100%;display: inline-block;background-size: .16rem .3rem;width: .5rem;height: 100%;}
.form-items{padding-bottom: .4rem;}
.form-items .item{height: .98rem;display: flex;justify-content: space-between;align-items: center;font-size: .3rem;border-bottom:.01rem solid #eeeeee;color: #333333;padding: 0 .22rem;position: relative;width: 100%;}
.form-items .item label{flex-shrink: 0;padding-right: .5rem;}
.form-items .item input{height: .6rem;text-align: right;width: 100%;}
.form-items .item input:focus{outline: none;}
.form-items .item.icon:after{content: "";background: url(../images/arrow-right.png) center right no-repeat;position: absolute;top: 0;right: .22rem;height: 100%;display: inline-block;background-size: .14rem .26rem;width: .30rem;height: 100%;}
.form-items .item.icon input{padding-right: .30rem;}
.upload-items{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 0 .45rem;}
.upload-items .item{width: 3.09rem;margin-bottom: .25rem;position: relative;}
.upload-items .item .img{height: 1.96rem;width: 100%;overflow: hidden;}
.upload-items .item .img img{width: 100%;height: 100%;}
.upload-items .item .msk{position: absolute;width: 100%;height: 1.96rem;top: 0;left: 0;background: url(../images/camera.png) center center no-repeat rgba(255,255,255,.2);background-size:.76rem .76rem ;}
.upload-items .item p{color: #999999;font-size: .28rem;line-height: .5rem;text-align: center;}
.submit{padding: 0 .45rem;}
.bank{display: none;}
.bank::-webkit-scrollbar{width: 0;}
.bank .mask{position: fixed;bottom: 0;left: 0;width: 100%;height: 100vh;background: rgba(0,0,0,.2);z-index: 5;}
.bank ul{position: fixed;bottom: 0;left: 0;width: 100%;height: 4.2rem;overflow-y: auto;background: #FFFFFF;border-radius: .3rem .3rem 0 0;padding: .5rem;z-index: 6;box-shadow: 0 -0.01rem .1rem rgba(0,0,0,.5);}
.bank ul li{height: .80rem;line-height: .80rem;text-align: center;font-size: .32rem;border-bottom: 1px solid #fcfcfc;}
.bank ul li.active{color: #0068FF;}</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.min.js"></script>
	</head>

	<body>
		<div class="nav-bar">
			<span class="back"></span>
			<span>完善认证资料</span>
		</div>
		<div class="container">
			<form action="#" onSubmit="submit">
				<div class="form-items">
					<div class="item">
						<label>姓名</label>
						<input type="text" name="name" autocomplete="off" placeholder="请输入姓名" class="input" />
					</div>
					<div class="item">
						<label>身份证号码</label>
						<input type="text" name="idcard" maxlength="18" autocomplete="off" placeholder="请输入身份证号" class="input" />
					</div>
					<div class="item">
						<label>银行预留手机号</label>
						<input type="text" name="phone" maxlength="11" autocomplete="off" placeholder="请输入银行预留手机号" class="input" />
					</div>
					<div class="item icon">
						<label>开户银行</label>
						<input type="text" name="bank" readonly autocomplete="off" placeholder="请选择开户银行" class="input" id="chooseBank" />
					</div>
					<div class="item">
						<label>结算卡号</label>
						<input type="text" name="banknum" maxlength="19" autocomplete="off" placeholder="请输入结算储蓄卡卡号" class="input" />
					</div>
				</div>
				<div class="upload-items">
				.........完整代码请登录后点击上方下载按钮下载查看