chevron-up bell reply instagram twitter2 feed3 finder search-25px-p0
换了主题,回归原生评论系统。

让 Firefox 的网页输入框也高亮发光

2009-01-17 . 阅读: 398 views

原文:让 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 {
outline: 2px solid #ebc476;
-moz-outline-radius: 3px;
}

和上一个脚本相比,主要添加了一个 CSS 圆角。-moz-outline-radius 即是轮廓的圆角,-moz-border-radius 则是 上篇文章 说过的边框圆角。

让网站支持输入框高亮

以上修改是在用户本地进行的,要把它搬到您的网站或者博客中,只需要将上面的样式添加到 CSS 表中就可以了。由于我的输入框已经有了一个边框圆角,那么需要再增大一下轮廓圆角的半径,并加上 !important 让它优先:

input:focus, select:focus, textarea:focus {
outline: 2px solid #ebc476;
-moz-outline-radius: 5px !important;
}

分享到: 更多

左岸

爱读书,爱生活!

发表评论