让 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 条评论

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

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

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

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

  3. 升級到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;
        }」
        沒啥效果呢~

  4. 请问一下老肥:为什么有些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 试试看呢?

  5. 请问是怎么指定呢?是这样吗:
    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 了?

  6. 喔~那個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; } 是有效的,所以我也不知道你的问题出在哪里了。。。

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




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