前端浮动表单~~

最新推荐文章于 2022-12-13 18:50:24 发布

MayJay517

最新推荐文章于 2022-12-13 18:50:24 发布

阅读量607

点赞数

本文链接：https://blog.csdn.net/MayJay517/article/details/78255334

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
<style type="text/css">
body{background: #e4ece5;
color: #363636;
font-size: 16px;
font-family: 'Cantarell', sans-serif;
line-height: 22px;}
.rf_submit{background: none;
border-radius: 4px;
border: 1px dotted #3dd585;
color: #3dd585;
font-size: 18px;
padding: 5px 25px;
display: block;
margin: auto;}
.rf_submit:hover {
cursor:pointer;
background:#3dd585;
color: #555;
}
.rf_submit:focus {
outline:none;
border: 1px solid #3dd585;
}
#formContainer{position: absolute;
top: 35%;
right: 7%;
bottom: 7%;
left: 7%;
margin: auto;
max-height: 800px;
max-width: 640px;}
#formHeader h3{margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;}
#formBody{font-size: .8em;
text-align: center;}
.FlowupLables .fl_label{cursor: text;}

.FlowupLables .fl_wrap{width: 500px;
height: 46px;
margin: 12px auto;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
.FlowupLables .fl_label{top: 15px; left: 5px;
position: absolute;
z-index: 3;
-webkit-transition: all .05s linear;
-moz-transition: all .05s linear;
transition: all .05s linear;}
.FlowupLables .fl_input{
background: none;
border: none;
border-bottom: 1px solid #555;
border-radius: 0;
font-size: 16px;
line-height: 22px;
padding: 20px 0 0 5px;
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
width: 100%;
z-index: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.FlowupLables .fl_wrap.focused .fl_label,
.FlowupLables .fl_wrap.populated .fl_label,
.no-js .FlowupLables .fl_label{top: 0;
font-size: 12px;
color: #555;}
.FlowupLabels .fl_wrap.focused .fl_label {
color: #00A34D;
}

</style>
</head>
<body>
<div id="formContainer">
<div id="formHeader">
<h3>File Request Form</h3>
</div>
<form id="formBody" class="FlowupLables">
<div class="fl_wrap">
<label class="fl_label" for="rf_name">Name:</label>
<input type="text" class="fl_input" id="rf_name" />
</div>
<div class="fl_wrap">
<label class="fl_label" for="rf_email">Email:</label>
<input type="email" class="fl_input" id="rf_email" />
</div>
<div class="fl_wrap">
<label class="fl_label" for="rf_company">Company:</label>
<input type="text" class="fl_input" id="rf_company" />
</div>
<div class="fl_wrap">
<label class="fl_label" for="rf_phone">Phone:</label>
<input type="tel" class="fl_input" id="rf_phone" />
</div>
<p><input class="rf_submit" type="submit" value="send"/></p>
</form>
</div>
</body>
</html>