Bug 156671 – Styled search fields (input[type=search]) are taller than they used to be

• Status: NEW
• Component: Forms

[Philippe Wittenbergh]

Created attachment 276574 [details]
test case

Particularly, input[type=search] fields are taller than other text input fields given the same styling.

There is a difference in height of about ~3-5px depending on the specified font-size + line-height

Somehow the ::-webkit-search-cancel-button makes the field taller. It seems to inherit the font size, its box becomes taller and grows the parent box (<div pseudo="-webkit-textfield-decoration-container">).

Hard to guess what exactly is going on though as the inspector in TP2 does not display the shadow DOM like it does with Safari 9.1.

[
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none }
seems to ‘fix’ the problem - but then I have to style the whole thing myself
]

In the testcase: various form controls in a row, styling based a real world stylesheet. The search field stands out as taller.

[Philippe Wittenbergh]

Created attachment 276575 [details]
screenshot

Top is safari TP2
Bottom is Safari 9.1

[Ahmad Saleem]

Created attachment 468953 [details]
Safari Technology Preview 184 - Zoomed-in to make it easier to see difference

It is still reproducible in STP184.