首页 > 代码库 > 美化表单
美化表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" name="viewport" />
<meta name=‘apple-mobile-web-app-capable‘ content=‘yes‘ />
<meta name="format-detection" content="telephone=no" />
<title></title>
<style>
body,div,span,i,strong,ul,li,a,p,b,textarea{ margin:0; padding:0; border:0;
font-family:"Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti;
-webkit-tap-highlight-color:rgba(0,0,0,0); word-wrap:break-word; word-break: break-all;
font-size: 14px; font-weight:normal; -webkit-text-size-adjust:none;
color: #494949; font-style: normal; }
html,body{ height: 100%; }
input,textarea{-webkit-appearance:none; margin: 0; padding: 0; outline: none; border: none; }
ul,ol{ list-style: none; }
img{ vertical-align: top; }
.box{ min-height: 100%; padding:15px 20px;}
.p-title{ color: #494949; font-size: 1em; line-height: 150%}
.p-title strong{ color: #ff8a00}
.main{ padding: 110px 0 10px 0; background: #fff8ed url(images/mao1.png) no-repeat center 10px;
background-size: 200px auto;}
.form-list{ width:80%; margin: 0 auto;}
.form-list li{ line-height: 18px; padding: 5px 0 }
.form-list i{ display: inline-block; width:37%; height: 26px; line-height: 26px; text-align: left}
.ares{width:100%; padding: 5px; border: 1px solid #ccc; height: 90px; overflow-x: hidden;
overflow-y: auto; outline: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;
box-sizing: border-box;}
.input-box{width:60%; height: 20px; line-height: 20px; padding: 2px; border: 1px solid #ccc;
background:#fff;float: right}
.input{ width:100%; height: 20px; line-height: 20px; }
.btn{ display: block; height: 45px; width:40%; font-size:1.25em; background: #f99d00; border-radius: 4px; color: #fff;
margin: 10px auto; text-align: center; line-height: 45px; text-decoration: none;
}
.btn:hover{ background:#dc8b02 }
/*input[type=checkbox]{ width:18px; height:18px; background:rgba(231,231,231,.78);*/
/*border-radius:2px; box-shadow:inset 0 1px 7px rgba(0,0,0,.12);*/
/*position:relative; border:0; vertical-align: top; }*/
/*label input[type=checkbox]:checked:before,*/
/*label input[type=checkbox]:checked:after{ content:‘‘; display:block;*/
/*background:rgba(182,184,181,1); position:absolute;*/
/*-webkit-transform:rotate(38deg); -moz-transform:rotate(38deg);*/
/*transform:rotate(38deg); border-radius:1px; }*/
/*label input[type=checkbox]:checked:before{ width:6px; height:3px; left:3px; top:9px; }*/
/*label input[type=checkbox]:checked:after{ width:3px; height:12px; left:10px; top:3px; }*/
input[type=checkbox]{width:18px; height: 18px; background: #fff; border-radius: 2px;
box-shadow: inset 0 1px 7px #ccc; position: relative; border: 1px solid #666;
vertical-align: top;
}
label input[type=checkbox]:checked:before,
label input[type=checkbox]:checked:after{content: ‘‘; display: block;
background: #ff00ff; position: absolute;-webkit-transform:rotate(38deg);
-moz-transform:rotate(38deg); transform:rotate(38deg); border-radius:1px;}
label input[type=checkbox]:checked:before{width:6px; height: 3px; left:3px; top:9px;}
label input[type=checkbox]:checked:after{width:3px; height: 12px; left:10px; top:3px;}
</style>
</head>
<body>
<div class="box">
<p class="p-title">
亲爱的用户：<br>
很抱歉看到您退订<strong>泡泡消息</strong>。假如我们哪里做得不好，请您批评指正。
</p>
<div class="main">
<ul class="form-list">
<li><label for="labfoa"><input type="checkbox" name="labfoa" id="labfoa"/> 我收到的泡泡消息都没价值</label></li>
<li><label for="labfob"><input type="checkbox" name="labfoa" id="labfob"/> 泡泡太多很讨厌</label></li>
<li><label for="labfoc"><input type="checkbox" name="labfoa" id="labfoc"/> 其他原因</label></li>
<li><textarea placeholder="请输入关键字" class="ares"></textarea></li>
<li><i>QQ联系方式</i><span class="input-box"><input type="text" class="input"/></span></li>
</ul>
</div>
<a href="javascript:" class="btn">确认订单</a>
</div>
</body>
</html>
美化表单