关灯
护眼
字体:

原文:让firefox的网页输入框也高亮发光

让firefox像chrome,safari一样当前输入框发光,效果如图。

最近折腾css的时候想到,这应该很容易通过css实现,搜了一下发现已经有现成的可以用,以下三种方法都可以轻松实现。

后面还会讲到如何加到博客css中,而不依赖于用户的浏览器。

brightfocus

用stylish或者greasemonkey加载它,高亮颜色可以自己修改。

它不光让输入框、按钮在激活的时候发光,连点击链接的a:active也发光了,当然,并没有改动a:hover。

不过我个人并不太喜欢链接发光。

不需要那么多行,只要两行就可以了,其实。

outlineinputslikesafari

这是一个极简单的脚本,只影响输入框和按钮,不过颜色和样式有点丑,需要修改。

自行添加到usercontent。

css

这是我采用的办法,不需要扩展,修改firefoxprofile下面的usercontent。

css实现,添加如下样式:

input:focus,select:focus,textarea:focus{outline:2pxsolid#ebc476;-moz-outline-radius:3px;}

和上一个脚本相比,主要添加了一个css圆角。

-moz-outline-radius即是轮廓的圆角,-moz-border-radius则是上篇文章说过的边框圆角。

让网站支持输入框高亮

以上修改是在用户本地进行的,要把它搬到您的网站或者博客中,只需要将上面的样式添加到css表中就可以了。

由于我的输入框已经有了一个边框圆角,那么需要再增大一下轮廓圆角的半径,并加上!

important让它优先:

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

important;}

请关闭浏览器阅读模式后查看本章节,否则将出现无法翻页或章节内容丢失等现象。



大草文集杜鹃文集豆棚闲话文集大风如刀文集稻沐汗文集冬眠在雪山上文集艾伦索妮娅端云文集骨中骨多情888文集第二颗红纽扣文集美食:摆摊第一天,盒饭就被抢光了白叶陈导当风不再来时文集帝佬文集淡淡茉莉文集第二根肋骨文集多尔纳罗文集冬雪秋叶文集待雅文集东篱菊蕊文集