javascript - 如何在 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; 

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?

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>