移动wap input登陆框自适应屏幕大小

快来打我* 2022-08-23 11:53 214阅读 0赞

<!DOCTYPE html>
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <title>input输入框满屏</title>
    <style>
    body {
    	height:100%;
    	background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#4E94C4), to(#EFF8FF));
    	background-image:linear-gradient(#4E94C4,#EFF8FF);
    	background-image:-moz-linear-gradient(#4E94C4,#EFF8FF);
    	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#EFF8FF', StartColorStr='#4E94C4')
    }
    body,html {
    	padding:0;
    	margin:0;
    	font-family:'Helvetica Neue',Helvetica,sans-serif;
    	font-size:14px;
    	color:#517188;
    	text-align:left;
    	background-color:#EFF8FF
    }
    a {
    	text-decoration:none;
    	color:#517188
    }
    .inputArea {
    	background:#fff;
    	border:1px solid #628aa5;
    	-webkit-border-radius:5px;
    	border-radius:5px;
    	-webkit-box-shadow:0 1px 5px #acaeaf inset,0px 1px 1px rgba(255,255,255,0.5);
    	box-shadow:0 1px 5px #acaeaf inset,0px 1px 1px rgba(255,255,255,0.5)
    }
    .inputLine {
    	color:#000;
    	padding:7px 10px;
    	clear:both
    }
    .inputLine:first-of-type {
    	border-bottom:1px solid #cfcfcf
    }
    .il {
    	float:left;
    	padding:5px 0
    }
    .ir {
    	overflow:hidden;
    	text-align:left;
    	padding:0
    }
    .ir input {
    	-webkit-appearance:none;
    	background:none;
    	width:99%;
    	border:0;
    	font-size:14px;
    	vertical-align:middle;
    	border:solid 1px #ccc;
    	margin:0;
    	padding:5px 0
    }
    
    
    </style>
    </head>
    <body>
    
    
    
    <div class="inputArea">
        <div class="inputLine">
            <div class="il">帐号：</div>
            <div class="ir"><input id="zh" type="text" name="uname" value="" placeholder="请输入Email 或 电话号码" autocapitalize="off" autocomplete="on"></div>
        </div>
        <div class="inputLine">
            <div class="il">密码：</div>
            <div class="ir"><input id="mm" type="password" name="pwd" value="" placeholder="请输入密码"></div>
        </div>
    </div>
    
    </body>
    </html>