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. 
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.
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: