I know the issue of adding an icon inside of a React text input has been covered in various questions in the past (for example: https://stackoverflow.com/a/43723780/5968663) but I can’t find one that addresses my issue:
.wrapper {
display: flex;
align-items: center;
flex-direction: row;
}
.icon {
height: 1.5rem;
width: 1.5rem;
background-color: red;
padding: 4px;
}
.input {
height: 50px;
}<div class="wrapper">
<div class="icon"></div>
<input class="input"></input>
</div> I have created a wrapper and trying to use flex to position the icon "inside" of the input (on the left side) – but I’ve been unable to find a solution. Can anyone see where I might be going wrong?
>Solution :
I think you should end up with something similar to:
.wrapper {
position:relative;
}
.icon {
height: 1.5rem;
width: 1.5rem;
background-color: red;
padding: 4px;
position: absolute;
box-sizing:border-box;
top:50%;
left:2px;
transform: translateY(-50%);
}
.input {
height: 50px;
box-sizing:border-box;
padding-left: 1.5rem;
}<div class="wrapper">
<div class="icon"></div>
<input class="input"></input>
</div> Also, you don’t need flexbox to doing that.