如何屏蔽Chrome/Safari等Webkit内核浏览器文本框和文本域的高亮边框、可变大小等自动外观处理

一直以来挺喜欢用Chrome的，速度快，界面简洁，比较友好，Safari由于也是Webkit内核，因此有着跟Chrome类似的表现，但是他们也有好心办坏事的时候，比如对文本框和文本域的处理，首先会自动加上黄色的高亮边框显示，然后对于文本域右下角会多出一个手动缩放尺寸的功能，这种“人性化”处理，一般情况下是很不错的，但是对于前端开发来讲，有时候反而成了问题，比如你想精准控制文本框文本域的外观样式和状态，那么Webkit这些处理反而成了败笔，怎么去掉这些呢？其实挺简单：

1、高亮外框的取消

input {
outline: none;
}

textarea {
outline: none;
}

如上，使用CSS的outline就可以实现

2、文本域缩放功能的取消

也是使用CSS，具体有两种方法

textarea {
width: 400px;
max-width: 400px;
height: 400px;
max-height: 400px;

上面是限定最大宽度和高度（CSS2），这也是最容易想到的方法了　　

texearea {
resize: none;
}

需要注意，这个方法中的resize是CSS3中的语法