文档章节

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

The-Start
 The-Start
发布于 2013/12/02 17:05
字数 329
阅读 746
收藏 8

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

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

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

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

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

00394a149-1  

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

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

如图:

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

© 著作权归作者所有

共有 人打赏支持
The-Start
粉丝 2
博文 37
码字总数 23478
作品 0
朝阳
程序员
私信 提问
Jquery 方式input textarea 的高亮实现

通过 query 的链式调用的方式把实现聚焦脱焦的高亮。其中mod-cus-input-focus 为高亮的 css 样式。 高亮 input 样式 mod-cus-input-focus{border:1px solid #377BCB;border-right-color:#377...

香吉士
2013/01/29
0
0
chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下...

freedonn
2014/08/07
0
0
[转]Webkit内核探究【1】——Webkit简介

注:【转载请注明文章来源、保持原样】 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660355.html 作者:李嘉昱 研究Webkit内核已经有一段时间了,在这期间我花了很多时间去研读w...

bin.feng
2010/12/15
0
0
JS 怎么动态设置CSS3动画的样式

http://www.oschina.net/question/864662_155340 针对之前的圆环的点在Android系统下会出现一卡卡的效果。于是想改用css3实现动画效果 求前端大神,如何设置动画的样式 如何在js设置初始角度...

会打杂的前端攻城狮
2014/05/20
415
0
style 元素的 sheet 属性指向的样式表对象在老版 WebKit 内核上有崩溃 Bug

因为需要美化 HTML 原生的 input[type="range"] 控件,但除了 IE 10+,Chrome、Firefox 都没提供对滑杆两端分别设置样式的伪元素,只好用 :before 来做“已选范围”的填充效果,而且需要 Ja...

南漂一卒
2015/06/09
320
0

没有更多内容

加载失败,请刷新页面

加载更多

rabbitmq安装教程

RabbitMQ有Windows与Linux版本的,这里先写Windows版本的安装。 以前安装软件总是在百度上找某某安装教程,结果能按照教程安装好的软件真的不多。想起先前以为大牛说的一句话,去官网按照官网...

em_aaron
今天
6
0
Android 贝塞尔曲线实践——波浪式运动

一、波浪效果如下 贝塞尔曲线自定义波浪效果的案例很多,同样方法也很简单,大多数和本案例一样使用二次贝塞尔曲线实现,同样还有一种是PathMeasure的方式,这里我们后续补充,先来看贝塞尔曲...

IamOkay
今天
3
0
Nmap之防火墙/IDS逃逸

选项 解释 -f 报文分段 --mtu 指定偏移大小 -D IP欺骗 -sI 原地址欺骗 --source-port 源端口欺骗 --data-length 指定发包长度 --randomize-hosts 目标主机随机排序 --spoof-mac Mac地址欺骗 ...

Frost729
今天
2
0
带你搭一个SpringBoot+SpringData JPA的环境

不知道大家对SpringBoot和Spring Data JPA了解多少,如果你已经学过Spring和Hibernate的话,那么SpringBoot和SpringData JPA可以分分钟上手的。 其实我在学完SpringBoot和SpringData JPA了之...

java菜分享
今天
7
0
Chocolatey 在Window搭建一个开发环境

在看了(利用 Chocolatey 快速在 Windows 下搭建一个开发环境)后,准备从零开始 一、准备工作 1、用管理员权限启动:powershell,执行错误请参考(PowerShell因为在此系统中禁止执行脚本的解...

近在咫尺远在天涯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部