让 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;
}

最新评论

  • fisio 可不,Google Reader 都去世十年了… Google Reader 的分享和效率
  • 轻重 天哪!今天整理Evernote,发现这条2010年的剪藏笔记,点击连接,原网站还在!12年了,中文互联网早已面目全非! Google Reader 的分享和效率
  • 小波 重新改博客,看看以前的wp小伙伴的博客,发现绝大部分都关了,没想到你的还在,只是停在11年了 我为什么爱 Twitter
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • fisio 可不咋地!您也是老司机了 我为什么爱 Twitter

发表您的评论

评论将回复给

😀🙂😯😁🙁😄😆😝😜👍🌈💖🎂

目前有 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 查看

没用 🙂


  1. 09年1月18日让 Firefox 的网页输入框也高亮发光 - 左岸读书_blog www.zreading.cn/archives/461.html
  2. 09年2月6日让 Firefox 的网页输入框也高亮发光 - 左岸读书_blog www.zreading.cn/archives/508.html
  3. 10年11月27日杜撰人生 » 让 Firefox 的网页输入框也高亮发光 www.do2do.net/2009/12/firefox.html
  4. 11年6月23日chrome高亮输入框颜色调整 | Seateng Blog blog.seateng.cn/archives/2011/06/chrome-input-area-highlighting.html