带图标的输入框

最新推荐文章于 2024-11-11 10:49:42 发布

原创最新推荐文章于 2024-11-11 10:49:42 发布 · 822 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #定位

demo 同时被 2 个专栏收录

4 篇文章

订阅专栏

CSS | CSS3

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Element-UI库，通过CSS样式实现账号输入框左侧带有人形图标的布局。关键在于使用相对定位和绝对定位，调整输入框内图标的位置，提供了一种简洁的前端界面设计方法。

在这里插入图片描述
在项目中经常可以看见账号或密码输入框，左侧带有一个人形小图标。
在vue中结合element-ui的使用：
html代码

    <div class="nameInput">
      <el-input v-model="val" placeholder="请输入您的账号"></el-input>
      <img src="../assets/person.png" alt="">
    </div>

style样式代码

.nameInput{
    width: 400px;
    position: relative;
  }
  .el-input__inner{
    padding-left: 40px;
  }
  .nameInput>img{
    position: absolute;
    left: 12px;
    top: 12px;
  }

实现原理：外层div开启相对定位position:relative；给输入框设置padding-left，用来放置小图标；给img元素设置绝对定位position:absolute，用top/left偏移属性调整位置,即可实现图示效果。