0

There is an input field with a certain font-size property.

form input[type=search] {
  width: 60%;
  font-size: 1.1em;
  padding: .35em .4em;
}

By default, because of the font size property, the height of the input field changes as well. All the browsers in Linux and Windows honor the font-size property. Firefox in MacOS too.

However Safari and Chrome/Opera in MacOS don't. The input field size and font size doesn't change in Safari. Chrome/Opera increases the font size only when the input field is on focus.

Input field out of focus in Chrome and out of focus in Safari

Input field on focus in Chrome (displayed correctly)

Input field on focus in Safari

The expected display is that the font size is honored whether the field is on focus or off focus. Only Firefox in MacOS displays it correctly.

flipper
  • 165
  • 1
  • 10
  • Do you use CSS resets? Apply them first. Also try to use class instead of `input[type=search]` or at least add quotes `input[type="search"]` – Justinas Nov 05 '18 at 08:29
  • Yes, I do use css resets from meyerweb.com with slight modifications to certain properties like `body`. – flipper Nov 06 '18 at 07:32

1 Answers1

0

You want your font size specified in rem not em https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem

It is always a good idea to specify line size (in em) and match it with height, if there is no clashing css this with most font-families will mean your text will be centered horizontally and the input field should be pretty much the same across browsers.

form input[type=search] {
   width: 60%;
   /* font-size: 1.1em; -- not em */
   font-size: 1.1rem; /* -- yes rem */
   padding: .35em .4em;
   line-height: 1.8em; /* -- add this -  whatever height you want in em */
   height: 1.8em; /* -- add this -  whatever height you want in em */
   box-sizing: border-box; /* -- you will probably want to add this because you are using padding */
}

box sizing link : https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Carol McKay
  • 2,438
  • 1
  • 15
  • 15
  • Also see the answer to this question, it may be contributing. https://stackoverflow.com/questions/47783168/mobile-chrome-wrong-font-size-when-using-height-property?rq=1 – Carol McKay Nov 05 '18 at 08:33
  • I had used rem units as advised, but it doesn't resolve it. I have added the padding and line-height as well, but of no use. Only when I click on the field, the font size changes. – flipper Nov 06 '18 at 07:32
  • without seeing the actual code we can't trouble shoot it @the_beginner – Carol McKay Nov 06 '18 at 07:36
  • The source code for the page is here at view-source:https://eduwatch.in/ and the css is https://eduwatch.in/assets/css/index.css. Note that only on Safari/Chrome/Opera on MacOS, I do get the inconsistency. – flipper Nov 07 '18 at 07:01