屏蔽Chrome(webkit)中的input、textarea的默认点击/聚焦高亮的样式

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

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

003949A26-0 屏蔽input聚焦高亮效果的样式:

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

其2、文本框(textarea 标签)缩放功能。 浏览器

00394a149-1  

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

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

如图: 设计

00394945W-2 若是考虑兼容webkit核心的浏览器,建议设计输入框或者文本框的时候尽可能保持原始的样式,若是设计作了很好看的圆角背影的效果
相关文章
相关标签/搜索