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

最新推荐文章于 2024-05-21 13:55:13 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-05-21 13:55:13 发布

阅读量2.9k

点赞数

分类专栏： div+css 文章标签： div css html wap 移动

本文链接：https://blog.csdn.net/boyit0/article/details/38064635

版权

div+css 专栏收录该内容

89 篇文章 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>

夏末_阳光依然耀眼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动wap input登陆框自适应屏幕大小

input输入框满屏body { height:100%; background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#4E94C4), to(#EFF8FF)); background-image:linear-gradient(#4E94C4,#EFF8FF); background-
复制链接

扫一扫

专栏目录