How to Insert an image inside an input field in react js?

user_15967629 0
Viewed 3256

.js file

     <div className = "num">
    <p >Enter Phone Number <span className='star'>*</span></p>

    <input
      type="tel"
      className="code"
      placeholder="+91"
    />

    <img className='drop' src={drop} alt='drop' />

    <input
      type="tel"
      className="number"
      placeholder="00000 00000"
    />
    </div>

.css file

.drop{
  color: #797B86;
  margin-top: 46.5px;
  margin-left:-30px;

without giving negative value, I'm unable to move it inside the box.Even after moving it inside the box, the space between these two boxes gets disturbed. What is the best way to do this?

} 
.star{
  color: #DE1F48;
}

Is it possible without giving negative values in stylesheet?

this is how its supposed to look

react-redux reactjs css javascript
1 Answers

You can surround your input and image by another element, and set the position of the image based on the parent as below:

.container { 
    position:relative;
    padding:0;
    margin:0;
}
.input { 
    height:20px;
    margin:0;
    padding-left:30px;
}
.image {
    position:absolute;
    bottom:8px;
    left:10px;
    width:10px;
    height:10px;
}
<div class="container">
    <input class="input" type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/right-forward-arrow-512.png" class="image">
</div>

user_117669470
Related