时间戳

首页 > 解决方案 > 如何在输入文本字段旁边放置自定义图标？

html - 如何在输入文本字段旁边放置自定义图标？

问题描述

我希望在显示的照片中创建所需的样式。无法将我创建的自定义 SVG 与文本字段内联。我将如何去创造这种效果？

这是我目前正在使用的代码片段，我哪里出错了？

如果有帮助的话，我主要使用 JQM 库。

<div class="box2" style="display: inline-block; position:relative; width: 40vw;">
   <img src="img/icon/regicons/usernumber.svg">
   <input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>

在此处输入图像描述

标签： htmlcssjquery-mobile

解决方案

确保与您<input/>的相同并将其放置在其父元素的顶部。height<image/>

  • height: 32px; box-sizing: border-box;
  • absolute; top: 0;

片段：

input {
  height: 32px; 
  box-sizing: border-box; 
  position: absolute; 
  top: 0;
}
.box2 {
  display: inline-block;
  position:relative;
  width: 40vw;
}
    <div class="box2" style="">
        
        <img width="32" height="32" src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32">
        <input type="text" name="userNo" id="userNo" placeholder="Number" required>
      
     </div>

推荐阅读