html5登录重置,HTML5 reset

一、先贴出项目中很多地方运用到的css的重置样式

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,

blockquote, pre, a, abbr,acronym, address, big, cite, code, del, dfn, em, img,

ins,kbd, q, s, samp, small, strike, strong, sub,sup, tt, var, b, u, i,center,

dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,tbody,

tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,

footer, header,hgroup, menu, nav, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

}

article, aside, details, figcaption, figure, footer, header, hgroup, main,

menu, nav, section, summary {

display: block;

}

ul, ol {

list-style: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

body, button, input,select,textare {

font: 14px/1 Tahoma,Helvetica,Arial,"\5FAE\8F6F\96C5\9ED1",sans-serif;

}

button, input, select, textarea {

font-size:100%;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after, q:before, q:after {

content: '';

content: none;

}

a {

text-decoration: none;

}

a:hover {

text-decoration:underline;

}

fieldset, img {

border: none;

}

address, cite, dfn, em, var {

font-style: normal;

}

code, kbd, pre, samp, tt {

font-family: "Courier New", Courier, monospace;

}

small {

font-size: 12px;

}

.clearfix:after{

content:"";

display:table;

clear:both

}

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

-webkit-appearance: none;

}

input[type="search"] {

-webkit-appearance: textfield;

box-sizing: content-box;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

-webkit-appearance: none;

}

二、一些样式解释

1.cleafix

项目主要在微信的移动端，所以无需考虑IE低版本直接做了简化！当然如果你需要运行在pc端保证完全的兼容也可以改成如下：

.clearfix:after{

content:"";

display:table;

clear:both

}

.clearfix{

*zoom:1;/*IE/7/6*/

}

2.input[type=”number”]，消除获取焦点时候上下箭头

在支持type=“number”的表单中，很明显的有上下的箭头，尤其在手机端的时候，如果只想让用户输入数字，又要去除不美观的上下箭头，那么可以加入如下代码：

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

-webkit-appearance: none;

}

3.input[type=”search”]，消除其获取焦点获且有搜索内容时候的“×" 的默认样式

在type=“search”的中，你光标定位到该文本框上会出现 "×" 的样式，重置让其消失,css如下：

input[type="search"] {

-webkit-appearance: textfield;

box-sizing: content-box;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

-webkit-appearance: none;

}

4.解决IE中表单不继承样式的问题

body, button, input,select, textarea {

font: 12px/1 Tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1", sans-serif;

}

因为在ie中，表单input，select, textarea  是不会继承body的样式，默认的还是为12px,所以需要一起设置！