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

文章关键词:

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

  • 作者: 主页   来源:http://tafkyy.com    栏目:欧亿娱乐注册    日期:2017-03-31
  •   让 Firefox 的网页输入框也高亮发光原文:让 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;

      
     

      }

      
     

  • 文章标签: 主页 ,欧亿娱乐注册
  • 首页
  • 欧亿娱乐官网
  • 欧亿娱乐注册
  • 欧亿娱乐登录平台
  • Tags标签