i have input , div next each other:
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
Post a Comment