I'm attempting to include an input field with an icon inside a div container. I want the width of the div to match exactly the size of the input.
Below is the code I have:
<div>
<input type="text">
<i class='glyphicon glyphicon-search'></i>
</div>
This is my CSS:
div {
background: blue;
display: inline-block;
}
i {
left: -30px;
color: #fff;
}
input {
position: relative;
width: 100px;
background: transparent;
}
Here's a working example on JSFiddle: http://jsfiddle.net/dwfh16me/3/
The issue I'm facing is that the div expands to accommodate the width of both the input and the icon, even though the icon is absolutely positioned. How can I ensure it doesn't consider the width of the icon?
Thank you in advance