前端浮动表单~~

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值