解决浏览器默认文本域和文本框边框大小问题

首先，我们了解一下各种浏览器的内核引擎吧

1、Trident: IE系列浏览器

2、Gecko: Firefox 是基于 Gecko 开发

3、WebKit: Safari, Google Chrome,傲游3 基于 Webkit 开发

4、Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini

其中Chrome、Safari等以Webkit为内核的浏览器在默认情况下，当文本域和文本框获得焦点时会出现边框，并且文本框还可以自由调整大小，这些浏览器厂商这么做可能也是为了用户体验吧，但我们有些时候并不需要这些默认的样式，那么我们该怎样去掉这些样式呢，其实也非常简单。

去除文本框默认边框：

input:focus{outline:none;}

去除文本域默认边框：

textarea:focus{outline:none;}

禁止文本域自由调整大小：

方法一：textarea{width:500px;height:200px;max-width:500px;max-height:200px;}通过设置max-width和max-height来禁止调整文本域大小

方法二：textarea{resize:none;}其中过resize属性为css3属性

关于outline属性：

[ outline-width ]:指定轮廓边框的宽度

[ outline-style ]:指定轮廓边框的样式

[ outline-color ]:指定轮廓边框的颜色

outline-style的一些取值：

none： 无轮廓。与任何指定的outline-width值无关

dotted： 点状轮廓。

dashed： 虚线轮廓。

solid： 实线轮廓

double： 双线轮廓。两条单线与其间隔的和等于指定的outline-width值

groove：3D凹槽轮廓

ridge： 3D凸槽轮廓

inset：3D凹边轮廓

outset：3D凸边轮廓

简写形式：outline:2px solid #ff0000;

关于resize属性的一些取值：

none:不允许用户调整元素大小。

both:用户可以调节元素的宽度和高度。

horizontal:用户可以调节元素的宽度

vertical:用户可以调节元素的高度

未经允许不得转载：爱前端网 » 解决浏览器默认文本域和文本框边框大小问题