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

相关文章

最新文章

更多 »

热门标签

Firefox Gmail Google Greasemonkey WordPress 创意 博客 地图 手机 扩展 美化 设计 黑莓

最新评论

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

随机文章


发表您的评论

评论将回复给

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

目前有 59 条评论

    1. Gmail 的界面一直悄悄的加一些东西… 现在这个蓝色的 input highlight 还不错，和匿名聊天者说话的时候输入框还是黄色的

  11. 很多时候ie和firefox出现的效果都不一样，比如firefox下是遮盖显示，但到了ie下却变成了并排显示

    这种情况到底是照顾哪种浏览器？依据哪个浏览器的效果来进行修改？？

  14. 星期日，http://www.olaile.com 一位钓鱼爱好者到河边钓鱼，先鱼勾穿了个树叶～半天没鱼上钩，他又换了块面包～一样半天没鱼上钩～
    没办法他只好去换蚯蚓～一样还是半天没鱼上钩～～
    他气愤之下～掏出100rmb 摔入水中大骂：“妈的。。。要吃什么！自己去买！！！！ ”

  27. 升級到Firefox 3.6(gecko 1.9.2)後，”-moz-outline”無效了~Mozilla說用outline就好~
    對了，要怎麼使Google搜尋框也變成圓角框呢？試了-moz-border-radius，沒啥效果……

    1. 果然啊。大概是 -moz-outline 已经完全转正了。不过老早就可以直接写 outline 的，我这样用是因为不想影响到 webkit, 毕竟 webkit 已经有相当不错的原生 focus outline 了嘛。

      哪里的 google 搜寻框？-moz-border-radius 应该不会失手的呀

      1. 這下只能用”outline”，應該會影響到webkit，該怎麼辦哩？
        另外我說的是Google首頁的搜尋框
        用了：「input,textaera {
        -moz-border-radius: 3px !important;
        }」
        沒啥效果呢~

  28. 请问一下老肥：为什么有些iput框无法套用”-moz-box-shadow”呢？(shadow发光的效果比较接近Safari)

    1. 这个主意不错 😀 我试了一下，现在 win firefox 效果如何了？

      input:focus, textarea:focus { -moz-box-shadow: 0 0 6px #07e, 0 0 5px #07e, 0 0 4px #07e; }

      1. 喔喔~多重陰影~不錯~
        不過套在stylish的結果，
        Google首頁的搜尋框就是無法顯示，
        但是用outline就可以，
        有辦法讓input先套-moz-box-shadow，
        不能的話再套outline嗎？

        1. 繁体没关系啦~ 😀

          我刚测试了一下，的确 google 首页的搜索框无法应用样式，-moz-border-radius 和 -moz-box-shadow 都不可以，要应用必须先指定 border-style. 加上 border-style: solid 或者 border: 1px solid #aaa 试试看呢？

  30. 请问是怎么指定呢？是这样吗：
    input:focus{
    border-style: solid ;
    -moz-box-shadow: 0 0 3px 2px rgba(235,196,118,0.7) ;
    -moz-outline-radius: 5px ;
    }
    不过这样做好像也没有效果……

    1. focus 就是光标选中以后的样式，如果要圆角，还是不要加 focus 的好。

      另外，-moz-box-shadow 好像写错了，多了一个 2px, 除了颜色之外应该只有三个像素值，分别代表 offset-x, offset-y, blur-radius. 可以参照一下我最新的一篇文章。

      还有，好像 -moz-outline, -moz-outline-radius 都在 3.6中失效了，必须要去掉 -moz 了？

  31. 喔~那個2px好像是指spread,陰影擴散範圍，
    另外-moz-outline-radius去看MDC的結果好像還有效，我是發現outline-radius無效才去看的 😮
    目前最大的問題是-moz-box-shadow還是無法放在Google首頁上，有點麻煩，有請老肥幫幫忙了~~ 😀

    1. 除了颜色之外，浏览器只认前三个长度值，把他们分别作为 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; } 是有效的，所以我也不知道你的问题出在哪里了。。。

  32. 感谢老肥的回复~
    可是不知道为何，即使我用了干净的Firefox，
    Google首页的box-shadow的效果还是出不来，
    算了~随它吧！
    我现在把input.lst设定为outline发光，算是一个折衷的方法吧~~ 😀 😀




有 4 条 pingbacks 从其它网站引用了本文