欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

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

美国FDC机房 发布于 2011-01-21  
CSS教程

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

同时苹果和google推出的相关智能手机也会用到webkit内核的mini浏览器。
这两款webkit引擎的浏览器其中默认添加了对用户体验非常好的小功能:
其一、页面输入框(input 标签)聚焦高亮。?

屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式-图片1
屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式-图片1

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

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

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

屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式-图片2
屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式-图片2

/*css2.0*/textarea {width: 400px;max-width: 400px;height: 400px;max-height: 400px;}/*css3.0*/texearea {resize: none;}

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

如图:

屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式-图片3
屏蔽谷歌浏览器(webkit)中的input、textarea的默认点击/聚焦高亮的样式-图片3

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

原文来自零度科技:http://www.ldisp.com/a/css/2011/802.shtml

上一篇:你应当了解的5个CSS3新技术
下一篇:经典CSS导航二级菜单,CSS二级菜单

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

26

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理