Some inputs have wrong height on mobile browsers

[gabbsmo]

Describe the bug <select> and <input type="date"> looks OK in desktop browser, but does not have the same height as <input type="text"> on some mobile browsers.

To Reproduce Steps to reproduce the behavior: <select class="hoo-input-text><!-- omitted --></select> <input type="date" class="hoo-input-text">

Expected behavior Same height as <input type="text" class="hoo-input-text">

Smartphone:

• Device: Samsung Galaxy S1
• OS: Android
• Browser: Samsung Internet

Additional context I realize that there is a hoo-input-date class as well, but found that it missed some functionality from hoo-input-text, or I was using it wrong. Either way, hoo-input-text did everything I wanted out of the box, except for this issue.

I know the <select> tag is not in the style guide so technically not a bug, but works just as well as the date field I mentioned before. I can open a separate feature request issue for it if you want.

My workaround:

select.hoo-input-text,
input[type="date"].hoo-input-text {
    height: 1.875rem;
}

Fixed height is OK, since these field types are not multi-line.