Firefox input:focus glow?

Hi,

How can I re-produce this Firefox input focus glow:

As soon as I apply a border to my input field, the input:focus glow goes away.

Any tips?

Thanks! :spf:

Micky

Well you could apply that as a background to the <input> on :focus.

True… That is definitely an option… But I think I am not really that keen on keeping the glow effect if I have to fake it. :smiley:

Looking at the skin I am using via gmail, it looks like they just fake it with a brighter colored border upon focus:

I was kinda hoping I could retain the browser defaults on the :focus.

Ah well, not a biggy.

Thanks for the reply!
Cheers,
Micky

hit “show user agent css” on the Style tab drop-down in Firebug and see what makes the input do that. Has to be a mac exclusive because mine don’t look like that.

Good call.

This is the relevant result:

input:-moz-read-write, textarea:-moz-read-write {
-moz-user-modify:read-write !important;
}
forms.css (line 150)
input {
-moz-appearance:textfield;
-moz-binding:url(chrome://global/content/platformHTMLBindings.xml#inputFields);
-moz-user-select:text;
-x-system-font:-moz-field;
background-color:-moz-field;
border:2px inset threedface;
color:-moz-fieldtext;
cursor:text;
font-family:-moz-use-system-font;
font-size:-moz-use-system-font;
font-size-adjust:-moz-use-system-font;
font-stretch:-moz-use-system-font;
font-style:-moz-use-system-font;
font-variant:-moz-use-system-font;
font-weight:-moz-use-system-font;
letter-spacing:normal;
line-height:normal !important;
padding:1px 0;
text-align:start;
text-indent:0;
text-rendering:optimizelegibility;
text-shadow:none;
text-transform:none;
word-spacing:normal;
}

Hrmmm, maybe “border:2px inset threedface;” is the culprit?

Heck, maybe I should just fake it… Esp. if non-mac users are not seeing this glow…

Thanks vanishdesign!

Cheers,
Micky

It might be, Opera users see something similar to that (mine does at least. I remember it). As I said earlier I would just set it as a background image. It’s the best you are ggoing to get cross-browser/platform.

Here is the Firebug output for “computed style” and “show user agent css”:


Text
font-family	arial,helvetica,clean,sans-serif
font-size	17.0333px
font-weight	400
font-style	normal
color	#000000
text-transform	none
text-decoration	none
letter-spacing	normal
word-spacing	normal
line-height	20.55px
text-align	start
vertical-align	baseline
direction	ltr
Background
background-color	#FFFFFF
background-image	none
background-repeat	repeat
background-position	0 0
background-attachment	scroll
opacity	1
Box Model
width	219px
height	20.55px
top	auto
right	auto
bottom	auto
left	auto
margin-top	0
margin-right	0
margin-bottom	8.51667px
margin-left	0
padding-top	5px
padding-right	5px
padding-bottom	5px
padding-left	5px
border-top-width	3px
border-right-width	3px
border-bottom-width	3px
border-left-width	3px
border-top-color	#F0F0F0
border-right-color	#F0F0F0
border-bottom-color	#F0F0F0
border-left-color	#F0F0F0
border-top-style	inset
border-right-style	inset
border-bottom-style	inset
border-left-style	inset
Layout
position	static
display	inline
visibility	visible
z-index	auto
overflow-x	visible
overflow-y	visible
white-space	normal
clip	auto
float	none
clear	none
-moz-box-sizing	content-box
Other
cursor	text
list-style-image	none
list-style-position	outside
list-style-type	disc
marker-offset	auto

Interesting that the border above says 3px… But in my previous post, it was “border:2px inset threedface;”.

I wonder if the default border width for iput fields is the same for all browsers… I am guess not. :smiley:

Ok, ok… I probably should just set a border and move on.

Cheers!
m

Yep yep… That is a great point… I am setting a specific pixel width on my input, so I would prefer to make things as consistent as possible cross-browser.

Thanks for the feedback Ryan! :spf: