Bright Focus For Firefox

Friday September 05, 2008

Safari displays a blue border about active elements like forms, buttons and links. And the same to Google's Browser Chrome.

In this regard, the only different between these two browsers is the color of the border. Chrome's border color is orange.

how about Firefox? Can it do the same work?

The answer is yes!

The first method is to use a Greasemonkey script named Bright Focus.Of course, before you install this script, you must install Greasemonkey or Stylish.

And the second method is to use userContent.css. yes, you just need to add some css codes to this file and then save.

the code below: 

@-moz-document url-prefix(http), url-prefix(file) {
input:focus,
button:focus,
select:focus,
textarea:focus {
  -moz-outline: 2px solid -moz-rgba(16,186,224,0.5) !important;
  -moz-outline-offset: 1px !important;
  -moz-outline-radius: 3px !important;
}
button:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="file"] >; input[type="button"]:focus {
  -moz-outline-radius: 5px !important;
}
button:focus::-moz-focus-inner {
  border-color: transparent !important;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] >; input[type="button"]::-moz-focus-inner {
  border: 1px dotted transparent !important;
}
textarea:focus, button:focus, select:focus, input:focus {
  -moz-outline-offset: -1px !important;
}
input[type="radio"]:focus {
  -moz-outline-radius: 12px;
  -moz-outline-offset: 0px !important;
}
}

Now, restart your browser, you will see the absolutely beautiful things.

FYI, if you like the chrome's border color, you can replace: 

-moz-rgba(16,186,224,0.5)

with 
-moz-rgba(252,156,0,0.5)