elementui输入框添加背景图片

qq_42586147

已于 2022-09-21 22:00:17 修改

阅读量1.4k

点赞数

文章标签： elementui javascript 前端

于 2022-09-21 21:51:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42586147/article/details/126981573

版权

本文介绍了一种使用CSS自定义输入框样式的方法，通过设置背景图片和具体尺寸，实现美观且独特的输入框设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

/deep/ .el-input__inner {
  width: 482px;
  height: 50px; // 输入框最好给上高度，否则高度会自动，效果不够美观
  border-image-source:url('~@/assets/images/input.png');
  border-image-slice: 20%; // 会将图片分割为9个区域，内容较多可自行百度
  border-image-width: auto; //这里设置为自动即可，若设置固定宽度不易把握
  }