html - Border of input thinner than that of a div -


i have input , div next each other:

input box search button

as can see border of input thinner div containing search icon. here code:

html

.location_input {    width: 150px;    height: 20px;    float: left;    padding-left: 3px;    display: inline-block;    -webkit-box-sizing: content-box;    -moz-box-sizing: content-box;    box-sizing: content-box;    padding: 3px 15px;    font: normal 16px/normal"open sans", sans-serif;    -o-text-overflow: clip;    text-overflow: clip;    -webkit-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);    -moz-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);    -o-transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);    transition: 200ms cubic-bezier(0.42, 0, 0.58, 1);    margin-left: 6px;    position: relative;    top: 42%;    transform: translatey(-42%);  }    .update_location_wrapper {    float: left;    height: 30px;    width: 30px;    position: relative;    border-left: none;    display: inline-block;    background-color: none;    border-top: 1px solid #bbb;    border-right: 1px solid #bbb;    border-bottom: 1px solid #bbb;    position: relative;    top: 42%;    transform: translatey(-42%);  }
<input type='text' class='location_input' placeholder='enter location' id='location_input'>  <div class='update_location_wrapper'>    <div class='update_location_text'>      <img src="//i.imgur.com/0p5bsio.png" alt="search" height="20" width="20">    </div>  </div>

is there way border of div match input border?

as input borders looks different on different browser, add wrapper border, or can this, increase right padding of input , move search button inside it.

.location_input {    width: 150px;    height: 20px;    float: left;    padding-left: 3px;    display: inline-block;    box-sizing: content-box;    padding: 3px 35px 3px 15px;    font: normal 16px/normal "open sans", sans-serif;    margin-left: 6px;    position: relative;  }    .update_location_wrapper{    margin-top: 4px;    margin-left: -25px;    float: left;    height: 30px;    width: 30px;    border-left: none;    display: inline-block;    position: relative;  }
<input type='text' class='location_input' placeholder='enter location' id='location_input'>  <div class='update_location_wrapper'>    <div class='update_location_text'><img src="http://placehold.it/20x20" alt="search" height="20" width="20"></div>  </div>


Comments