html 文本框 初始化,HTML5移动页面开发小结：基本初始化

最近工作比较忙，加上也比较懒于梳理，文章的更新进度也慢了很多。

我们一般在写HTML5移动页面的时候会进行一些基本的初始化。

HTML方面：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

默认样式重置：

1、-webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)。

2、outline：none

(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。

(2)input，textarea{outline:none} 取消chrome下默认的文本框聚焦样式。

(3)在移动端是不起作用的，想要去除文本框的默认样式可以使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性，其实是多余。

3、-webkit-appearance

-webkit-appearance: none;//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失。

4、-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

5、-webkit-text-size-adjust

-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整

6、-webkit-touch-callout

-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

7、-webkit-overflow-scrolling

-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)

CSS重置参考：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

@charset "UTF-8";

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,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

*{tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-tap-highlight-color:rgba(0,0,0,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}

html{-webkit-tap-highlight-color:transparent;height:100%;min-width:320px;overflow-x:hidden}

body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;line-height:1;color:#333;background-color:#f0efed}

input,textarea{outline:0;resize:none;}

a{color:#2bb2a3;text-decoration:none;outline:0}

a:focus{outline:thindotted;outline:5pxauto-webkit-focus-ring-color;outline-offset:-2px}

a:active,a:hover{outline:0}

button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}

button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}

table{border-collapse:collapse;border-spacing:0}

td,th{padding:0}

img{vertical-align:middle;border:0}

@-ms-viewport{width:device-width}

input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}

ol,ul{list-style:none;}

blockquote,q{quotes:none;}

blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}

仅供参考，有一些可以在自己的项目中酌情添加使用。

写得比较粗糙。感觉还有很多要写的，比如响应式等。后面我会继续完善并添加关于在移动开发过程中调试的内容。暂记到此，给小盆友泡奶粉先^_^