Question

我正在尝试在文本框中添加附件文件图标。

<div class=row>
  <div class="col-lg-10">
    <input type="text" id="fname" name="firstname" placeholder="Type Here.." >
  <div class="col-lg-2">
    <div class="image-upload" id="">
      <label for="file-input">
        <img src="https://image.flaticon.com/icons/svg/53/53582.svg"/  width="35" height="35">
      </label>
      <input id="file-input" type="file" multiple="multiple"/>
    </div>
  </div> 
</div>

现在在上面的代码中，在文本框后显示了附件或上传文件选项，但我希望此图标在文本框中显示（例如：whtsapp文本框或skype文本框）。

有人可以指导我吗？

预先感谢！

Answer 1

尝试一下，希望对您有所帮助。谢谢

.attachmentWrap {
  border: 1px solid #ccc;
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  width: 250px;
}
.attachmentWrap img {
  position: absolute;
  left: 1px;
  top: 1px;
  height: 15px;
  width: 15px;
}
.attachmentWrap input {
  border: 0;
}

<div class=row>
  <div class="col-lg-10">
    <div class="attachmentWrap">
      <input type="text" id="fname" name="firstname" placeholder="Type Here.." >
      <label for="file-input">
        <img src="https://image.flaticon.com/icons/svg/53/53582.svg" alt="" />
      </label>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="image-upload" id="">
      <input id="file-input" type="file" multiple="multiple"/>
    </div>
  </div> 
</div>

Answer 2

希望它能起作用！在浏览器屏幕上以％acc的方式管理左页边距。

<hello name="{{ name }}"></hello>
<div class=row>
    <div class="col-lg-10">
        <img _ngcontent-c68="" height="20" src="https://image.flaticon.com/icons/svg/53/53582.svg" width="20" style="margin-left: 30%;z-index: 999999;position: absolute;">
    <input  type="text" id="icon" name="firstname" placeholder="Type Here.." >
  <div class="col-lg-2">
    <div class="image-upload" id="">
      <input id="file-input" type="file" multiple="multiple"/>
    </div>
  </div> 
</div>

在Angular的文本框中添加附件文件选项

2 个答案: