如何在React JS中将图像插入输入框？

Question

.js文件

     <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文件

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

如果不给出负值，我就无法将它移动到盒子内。即使将其移动到盒子内，这两个盒子之间的空间也会受到干扰。最好的方法是什么？

} 
.star{
  color: #DE1F48;
}

在样式表中是否可以不给出负值？

- Sritharni CN

Answer 1

您可以将输入框和图片包裹在另一个元素中，并根据父元素设置图片的位置，代码如下所示:

.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>

- alisasani