取消谷歌 Chrome 文本框(域)外边框高亮和缩放功能的办法

时间：2014-09-09 10:56:48 阅读：203 评论：0 收藏：0 [点我收藏+]

首先一下是摘抄别的博友的，我遇到过这问题才找的，希望也能为其他的博友解决这问题。

浏览器一直以来挺喜欢用谷歌的Chrome，界面简洁，体积小，速度快。因为苹果Safari也是使用Webkit内核，因此他们有着类似的样式体现。

虽然有诸多优点，但也有好心办坏事的时候，比如对文本域、文本框的处理，首先对于文本域右下角会多出一个手动缩放尺寸的功能，然后会自动加上黄色的高亮边框显示，这种“人性化”处理，一般情况下是很不错的，但是对于前端开发来讲，有时候反而成了问题，比如你想精准控制文本框文本域的外观样式和状态，那么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中的语法

取消谷歌 Chrome 文本框(域)外边框高亮和缩放功能的办法

标签：使用 ar div 问题代码 on c line size

原文地址：http://www.cnblogs.com/liuchenya/p/3961414.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行