让 Firefox 的网页输入框也高亮发光
让 Firefox 像 Chrome, Safari 一样当前输入框发光，效果如图。最近 折腾 CSS 的时候想到，这应该很容易通过 CSS 实现，搜了一下发现已经有现成的可以用，以下三种方法都可以轻松实现。后面还会讲到如何加到博客 CSS 中，而不依赖于用户的浏览器。
Bright Focus
用 Stylish 或者 Greasemonkey 加载它，高亮颜色可以自己修改。它不光让输入框、按钮在激活的时候发光，连点击链接的 a:active 也发光了，当然，并没有改动 a:hover. 不过我个人并不太喜欢链接发光。不需要那么多行，只要两行就可以了，其实。
Outline Inputs Like Safari
这是一个极简单的脚本，只影响输入框和按钮，不过颜色和样式有点丑，需要修改。
自行添加到 userContent.css
这是我采用的办法，不需要扩展，修改 Firefox profile 下面的 userContent.css 实现，添加如下样式：
input:focus, select:focus, textarea:focus {
-moz-outline: 2px solid #ebc476;
-moz-outline-radius: 3px;
}
和上一个脚本相比，主要添加了一个 CSS 圆角。-moz-outline-radius 即是轮廓的圆角，-moz-border-radius 则是 上篇文章 说过的边框圆角。
让网站支持输入框高亮
以上修改是在用户本地进行的，要把它搬到您的网站或者博客中，只需要将上面的样式添加到 CSS 表中就可以了。由于我的输入框已经有了一个边框圆角，那么需要再增大一下轮廓圆角的半径，并加上 !important 让它优先：
input:focus, select:focus, textarea:focus {
-moz-outline: 2px solid #ebc476;
-moz-outline-radius: 5px !important;
}
目前有 59 条评论
话说现在我是越来越不想打开firefox了。。
PS：半夜折腾新空间 不小心来个沙发 :p
老肥。。你走火入魔啦。。。
酷，去试试。
唔，昨天发现 Gmail 的默认皮肤就有
Gmail 的界面一直悄悄的加一些东西… 现在这个蓝色的 input highlight 还不错，和匿名聊天者说话的时候输入框还是黄色的
IE下测试，没有发光效果。
圆角也是，不支持就不支持啦。
Mac 在 Safari 下对自动有个蓝色的框,现在让你折腾成这个颜色了…
对啊 我这个颜色是 Chrome 下的
看来我要针对 webkit 核心的浏览器禁用这个样式.. 😀
效果非常好。学习一下。
奇怪,我的Firefox 就是这样的啊,没作过什么修改.
我的是 Firefox 3.0.5/Ubuntu 8.10
Ubuntu 下的原因？或者哪个Greasemonkey 脚本、Stylish 样式所带来的？
用了，在IE下无效，FF下不错～
装上油猴子脚本了，我比较懒
很多时候ie和firefox出现的效果都不一样，比如firefox下是遮盖显示，但到了ie下却变成了并排显示
这种情况到底是照顾哪种浏览器？依据哪个浏览器的效果来进行修改？？
能兼顾则兼顾，有不少 CSS IE hacks, 可以搜一搜
实在不能兼顾的话，抛弃 IE 吧
可惜ie不支持呀.
不管怎么说IE还是大头，不支持ie几乎不可用。
星期日，http://www.olaile.com 一位钓鱼爱好者到河边钓鱼，先鱼勾穿了个树叶～半天没鱼上钩，他又换了块面包～一样半天没鱼上钩～
没办法他只好去换蚯蚓～一样还是半天没鱼上钩～～
他气愤之下～掏出100rmb 摔入水中大骂：“妈的。。。要吃什么！自己去买！！！！ ”
俺没用firefox
老肥走火入魔,鉴定完毕!
不错 但是 懒得试
不错！用上啦，谢谢！
呵呵
IE7下看不到。
的确不支持
請問一下，”Bright Focus” 怎麼改發光搜尋框的顏色?
-moz-rgba(16,186,224,0.5) 这里面 16,186,224 就是 RGB 颜色值啦
哦！原來如此！想說怎麼找不到色碼…
那那個鏈接發光怎麼去除呢?
如果只需要输入框发光的话，就文中那两句足矣。如果不需要圆角，一句就够了
🌈 joocc
顶你一下，博客讲扩展的很好。
🌈 挺好，有新意。
CSS高手啊。。
升級到Firefox 3.6(gecko 1.9.2)後，”-moz-outline”無效了~Mozilla說用outline就好~
對了，要怎麼使Google搜尋框也變成圓角框呢？試了-moz-border-radius，沒啥效果……
果然啊。大概是 -moz-outline 已经完全转正了。不过老早就可以直接写 outline 的，我这样用是因为不想影响到 webkit, 毕竟 webkit 已经有相当不错的原生 focus outline 了嘛。
哪里的 google 搜寻框？-moz-border-radius 应该不会失手的呀
這下只能用”outline”，應該會影響到webkit，該怎麼辦哩？
另外我說的是Google首頁的搜尋框
用了：「input,textaera {
-moz-border-radius: 3px !important;
}」
沒啥效果呢~
倒是Firebug也成圓角了~~
请问一下老肥：为什么有些iput框无法套用”-moz-box-shadow”呢？(shadow发光的效果比较接近Safari)
这个主意不错 😀 我试了一下，现在 win firefox 效果如何了？
input:focus, textarea:focus { -moz-box-shadow: 0 0 6px #07e, 0 0 5px #07e, 0 0 4px #07e; }
喔喔~多重陰影~不錯~
不過套在stylish的結果，
Google首頁的搜尋框就是無法顯示，
但是用outline就可以，
有辦法讓input先套-moz-box-shadow，
不能的話再套outline嗎？
繁体没关系啦~ 😀
我刚测试了一下，的确 google 首页的搜索框无法应用样式，-moz-border-radius 和 -moz-box-shadow 都不可以，要应用必须先指定 border-style. 加上 border-style: solid 或者 border: 1px solid #aaa 试试看呢？
糟…我忘了转简体了~老肥抱歉~~
请问是怎么指定呢？是这样吗：
input:focus{
border-style: solid ;
-moz-box-shadow: 0 0 3px 2px rgba(235,196,118,0.7) ;
-moz-outline-radius: 5px ;
}
不过这样做好像也没有效果……
focus 就是光标选中以后的样式，如果要圆角，还是不要加 focus 的好。
另外，-moz-box-shadow 好像写错了，多了一个 2px, 除了颜色之外应该只有三个像素值，分别代表 offset-x, offset-y, blur-radius. 可以参照一下我最新的一篇文章。
还有，好像 -moz-outline, -moz-outline-radius 都在 3.6中失效了，必须要去掉 -moz 了？
喔~那個2px好像是指spread,陰影擴散範圍，
另外-moz-outline-radius去看MDC的結果好像還有效，我是發現outline-radius無效才去看的 😮
目前最大的問題是-moz-box-shadow還是無法放在Google首頁上，有點麻煩，有請老肥幫幫忙了~~ 😀
除了颜色之外，浏览器只认前三个长度值，把他们分别作为 offset-x, offset-y, blur-radius, 所以如果出现第四个长度值，是被忽略的。当然最少可以只有两个，只有两个的时候 blur-radius 缺省为零，颜色也可以不写。
另外，不是很建议用 input:focus, 因为很多元素都是 input, 比如下拉菜单，按钮，勾选框，等等。在google首页，输入框是有个 class=lst 的，可以写 input.lst:focus。或者专门指定 type=input 和 textarea, 写作 input[type=”text”], textarea {…}
我在 firefox 上试过了 input.lst:focus { border-style: solid; -moz-box-shadow: 0 0 5px #000; } 是有效的，所以我也不知道你的问题出在哪里了。。。
感谢老肥的回复~
可是不知道为何，即使我用了干净的Firefox，
Google首页的box-shadow的效果还是出不来，
算了~随它吧！
我现在把input.lst设定为outline发光，算是一个折衷的方法吧~~ 😀 😀
效果很炫很漂亮啊，可惜IE下无效，不知道有没有兼容方法
fx 3.6下面失效了
我发现了,把moz去掉就好了
这个属性被 moz 转正了。。。
按你说的改了userContent.css
但是没效果啊
怎么回事？
-moz-outline 已经失效了吧，直接用我现在的css代码，-moz-box-shadow, 用 firebug 查看
没用 🙂
有 4 篇其他博客的文章引用了本文