In the process of creating a search field with an input field and an svg icon, I encountered different browser behaviors in Chrome, Firefox, and IE11.
Chrome – the preferred version https://i.sstatic.net/ikBgD.png
Firefox https://i.sstatic.net/9lcqQ.png
IE11 (confusing) https://i.sstatic.net/UwcXw.png
Check out the working demo of the code on codepen.
HTML
<div class="input-wrap">
<input placeholder="Search…" />
<div class="icon">
<svg viewBox="0 0 100 100">
<g transform="scale(4,4)">
<path d="M2.2,9.1c0-3.8,3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9,6.9c0,3.8-3.1,6.9-6.9,6.9C5.3,16,2.2,12.9,2.2,9.1zM24,22.4l-7.7-7.7c1.3-1.6,1.9-3.6,1.9-5.6c0-5-4.1-9.1-9.1-9.1C4.1,0,0,4.1,0,9.1s4.1,9.1,9.1,9.1l0,0c2,0,4-0.7,5.6-1.9l7.7,7.7L24,22.4z"></path>
</g>
</svg>
</div>
</div>
CSS
* { box-sizing: border-box; }
html { font-size: 15px; }
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.input-wrap { position: relative; }
input {
font-size: 1rem;
padding: 20px;
width: 400px;
outline: none;
border: 1px solid black;
}
.icon {
position: absolute;
border: 2px solid blue;
right: 0;
top: 0px;
bottom: 0px;
padding: 10px;
}
.icon svg {
height: 100%;
border: 2px solid yellow;
}
The blue border indicates the parent of the svg, while the yellow border represents the svg itself. Chrome adjusts the size of the svg's parent based on the content, Firefox makes the parent span the entire search-field, and IE's behavior remains unclear. The goal is to achieve uniformity across browsers by emulating Chrome's behavior, with a key characteristic being the absence of fixed lengths. Everything should scale proportionally based on rem units. Ideally, JavaScript involvement should be avoided.
If you have any suggestions or insights, they would be greatly valued!