天天看点

area标签高亮_屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式...

WebKit作为一个开源的浏览器引擎,而且有google及苹果的大力推广,应该将来的市场占有的份额应该不错。

同时苹果和google推出的相关智能手机也会用到webkit内核的mini浏览器。

这两款webkit引擎的浏览器其中默认添加了对用户体验非常好的小功能:

其一、页面输入框(input 标签)聚焦高亮。?

area标签高亮_屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式...

屏蔽input聚焦高亮效果的样式:

input {outline: none;}textarea {outline: none;}

其二、文本框(textarea 标签)缩放功能。

area标签高亮_屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式...

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

400px;max-height: 400px;}texearea {resize: none;}

可能将来的网页会偏向简洁设计,所以webkit开发团队已经不考虑当设计的输入框是圆角的时候输入框和文本框出现的问题,所以当你隐藏了点击前的样式而你如果忘记去掉了聚焦后的webkit赋予的默认样式,webkit引擎浏览器的就会出现问题。

如图:

area标签高亮_屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式...

如果考虑兼容webkit核心的浏览器,建议设计输入框或者文本框的时候尽量保持原始的样式,如果设计做了很好看的圆角背影的效果

----------------------------------------------------------------

input文本框在IE及各浏览器下的兼容问题

对于input在各个浏览器下的表现真的是很让人蛋疼和不解,也是众多前端童鞋痛恨至极的一个选择器。借鉴一下飞鱼的声纳写的一篇文章input标签默认样式的差别及其跨浏览器设计,大家可以直接踩传送门过去看下IE和FF下这个蛋疼标签的大小及显示。

之前还有一篇文章写的是使用text-indent缩进输入框在谷歌浏览器下无效的问题,忘记在哪里看到的了,但是这也是大家应该注意的一点,如果实在需要使用这样的效果,那可以考虑加JS来解决,不过一般不推荐。

下面罗列一下input使用注意事项:

尽量不要使用height来指定文本框的大小,可以使用padding的方式,或者使用height加line-height的方法;

input的文本框默认是有background属性的,所以要透明,必须设置background:none;

input默认也是有边框的,而且在IE和FF下对边框的解析还是不一样的,如果你的网站用到input的地方比较多,建议写一个通用的头

input{border:none;}

input如果设置了高度那么在IE和FF中很难取得输入文本位置一致的效果。