Bug 17751

Summary: focus ring on an input control looks odd and changes shape when you start typing in the input
Product: WebKit Reporter: jasneet <jasneet>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: gur.trio, jasneet, webkit
Priority: P2 Keywords: HasReduction
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
URL: https://www.circuitcityrewards.com/Login.aspx
Attachments:
Description Flags
screenshot
none
reduction
none
even reduced test case none

Description jasneet 2008-03-10 13:28:00 PDT 
I Steps:
Go to
https://www.circuitcityrewards.com/Login.aspx
Click inside the username input box for focus.

II Issue:
Notice the blue highlighted odd shape surrounding the input box

III Conclusion: The <input> field uses a background image (which is a rectangle) to simulate an actual input field. Then in the styles of the input field, they have defined a line-height of 33px - which causes the issue. When you set the focus to the input field, the height that spans the blue highlight in Safari around the input field is actually the number of pixels specified in the line-height property.

IV Other browsers:
IE6: ok
FF2: ok
Opera: ok

V Nightly tested: 30881
Comment 1 jasneet 2008-03-10 13:28:48 PDT 
Created attachment 19641 [details]
screenshot
Comment 2 jasneet 2008-03-10 13:31:25 PDT 
Created attachment 19642 [details]
reduction
Comment 3 Robert Blaut 2008-03-10 13:47:13 PDT 
Created attachment 19643 [details]
even reduced test case

Confirmed a bug. The issue is side effect of setting line-height for input box.
Comment 4 Robert Blaut 2008-03-10 13:59:46 PDT 
I've noticed that sometimes Webkit "refuses" to show the issue. Try to click a couple of times outside and inside input box until the strange focus ring appears ;)
Comment 5 gur.trio 2013-12-23 22:10:22 PST 
Verified and tested . Its working.

*** This bug has been marked as a duplicate of bug 17619 ***