Safari includes border for height input?

Question

Why i have this difference in height on my input when i check the website on Safari? I can see that Safari includes the border line also in the heigth, i'm not sure if that's the problem or how to fix that.

Input on Chrome Input on Safari

<div className="input_city">
    <input
       id="input_basic"
       placeholder="Search city"
       onChange={handleInput}
       value={searcher}
     />
     <button className="button_search" onClick={handleSubmit}>
      Search
     </button>
</div>

.input_city {
  display: table;
  align-items: center;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 6;
  margin-bottom: -10px;
  text-align: end;
}

#input_basic {
  padding: 8.5px 5px;
  font-size: 1rem;
  border-radius: 3px 0px 0px 3px;
  border: 1px solid #ccc;
  border-right: none;
  vertical-align: bottom;
}

#input_basic:focus {
  outline: none;
}


.button_search {
  border-radius: 0px 3px 3px 0px;
  padding: 10px 5px;
  border: 1px solid #ccc;
  width: 5rem;
  background-color: #ec6e4c;
  color: #fff;
  border-left: none;
  cursor: pointer;
}

.button_search:focus {
  outline: none;
}

.button_search:hover {
  background: #ec6f4cc7;
}

score 0 · Answer 1 · answered Jan 05 '21 at 22:15

There are a couple of problems with trying to align the input and search button elements.

Safari puts a small shadow at the top under the border which gets it out of alignment with the search button border. Also, for any browser the heights of the two elements are not necessarily exactly the same.

To get round these two problems we first get the browser to remove as much of its own formatting as we can and then we use rems as the base unit, setting a specific height on the two elements so we don't have to rely on how the browser treats the font for setting the elements' heights.

Here's the code.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input[type=text] {   
    /* remove browser formatting */
    /* note that Safari uses attribute type so we've added it in the HTML */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    outline: none;
    }
    
.input_city {
  display: table;
  align-items: center;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 6;
  margin-bottom: -10px;
  text-align: end;
}

#input_basic {
  font-size: 1rem;
  border-radius: 3px 0px 0px 3px;
  border: 1px solid #ccc;
  border-right: none;
  vertical-align: bottom;
  
  /*added*/
  line-height: 1.2rem;
  padding: 0.25rem;
  height: 2rem;
}

#input_basic:focus {
  outline: none;
}

.button_search {
  border-radius: 0px 3px 3px 0px;
  border: 1px solid #ccc;
  width: 5rem;
  background-color: #ec6e4c;
  color: #fff;
  border-left: none;
  cursor: pointer;
  
    /*added*/
  line-height: 1.2rem;
  padding: 0.25rem;
  height: 2rem;
}

.button_search:focus {
  outline: none;
}

.button_search:hover {
  background: #ec6f4cc7;
}

<div class="input_city">
    <input type="text" id="input_basic" placeholder="Search city" onChange="" value=''/>
     <button class="button_search" onClick="">
      Search
     </button>
</div>

This Remove iOS input shadow has useful information on removing browsers' built-in formatting.

Safari includes border for height input?

1 Answers1