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

最新评论

  • 衣皇后 对你爱爱爱不完,我可以天天月月年年看你博客到永远! 我为什么爱 Twitter
  • Kaylin Pra quem leva a sério esses argumentos desses links, é melhor nunca mais assistir um filme de Holywood. Todos sabem que Disney era conaorvsder para os padrões de lá. 人脸标签!体验 Picasa 网络相册新功能
  • Justice | | | | | inmidderen film izleme sitesi bedava filmler canlı film seyret binlerce filmler online sinema izletir beleÅŸ filmler filmini full izle ücretsiz sinema izleme sitesi filmini izle direk filmler son çıkan filmler vizyondan sonra full sinema izleme sitesi filmleri tam izle indirmeden bedava filim filmler full ve bedava 非常有创意的献血慈善广告
  • Mikel Congratulations on your spicy new name; and the expansion of your services.As a long time patron of ‘Chef Sazon’, I look forward to Roho Kitchen’s future success. Whether it is cooking classes, food and beverage pairing classes,event catering, or pop- up reratusants— I know that Roho Kitchen will always deliver an amazing culinary experience!. Semih Sayginer的开伦表演
  • Charlotte Gee willekirs, that's such a great post! 超牛的flash忍者游戏: N-Game

发表您的评论

您的评论将回复给 原评论者

:D:):O8):(8D;DXD:P:nice::rainbow::cafe::love::cake:

目前有 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 颜色值啦

哦!原來如此!想說怎麼找不到色碼...
那那個鏈接發光怎麼去除呢?

如果只需要输入框发光的话,就文中那两句足矣。如果不需要圆角,一句就够了

:rainbow: joocc

顶你一下,博客讲扩展的很好。

:rainbow: 挺好,有新意。

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 篇其他博客的文章引用了本文

  1. 09年1月18日让 Firefox 的网页输入框也高亮发光 - 左岸读书_blog
  2. 09年2月6日让 Firefox 的网页输入框也高亮发光 - 左岸读书_blog
  3. 10年11月27日杜撰人生 » 让 Firefox 的网页输入框也高亮发光
  4. 11年6月23日chrome高亮输入框颜色调整 | Seateng Blog