修改element UI的input输入框的clearable的图标样式

最新推荐文章于 2025-03-31 15:13:14 发布

悦悦猪

最新推荐文章于 2025-03-31 15:13:14 发布

阅读量5.9k

点赞数 1

分类专栏： element 文章标签： iconfont elementui

本文链接：https://blog.csdn.net/zhangxiaodui/article/details/121635291

版权

element 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用iconfont替换Element UI Input组件的clearable图标，关键步骤包括设置'font-family: 'iconfont''和修改'content: 'e6f3''。

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

方法

::v-deep .el-input__suffix {
  .el-icon-circle-close:before {
    font-size: 16px;
    font-family: 'iconfont';
    content: '\e6f3';
    color: rgba(152, 167, 185, 0.5);
  }
}

tip

在这里用的是iconfont的图标，重点在于加

font-family: ‘iconfont’；和修改content的值

content: ‘\e6f3’

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

悦悦猪

关注关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ElementUI样式优化：el-input修改样式、el-table 修改表头样式、斑马格样式、修改滚动条样式、

weixin_47194802的博客

06-28

4219

表格部分js部分添加} else {// 表格斑马自定义颜色。

el-input实现后缀图标和clearable的兼容，调整el-input clearable与自定义图标展示位置问题

G佳伟

06-04

1260

背景：常见的输入框存在两个图标的展示效果都是清空在前搜索或其他图标在后。

2 条评论您还未登录，请先登录后发表或查看评论

修改Element UI可清空Input的样式

12-13

1491

修改Input右侧的清空按钮位置

Element ui input组件类型为 textarea 时没有清空按钮

最新发布

abcd123596的博客

03-31

299

Element ui input组件类型为 textarea 时没有清空按钮

el-input添加属性clearable后样式（宽）发生变化

weixin_49516521的博客

03-15

3735

检查发现，element 中clearable图标是用span包裹起来的，我的代码结构中标题也是用span包裹起来的，并且统一设置了li下面的span的样式。而clearable也刚好在li下面，所以也被更改了。el-input添加属性clearable之前，宽都是一样的，在项目中并没有设置过input相关的样式，在添加完属性，输入内容后宽发生了变化，并且清除的图标位置也往前偏。解决：选择li下面的子元素span，并把input的宽度设置成加上clearable之后的宽。今天就来简单记录个小问题吧，

element input clearble 样式

josiecici的博客

06-28

1930

/deep/ .el-icon-search{ font-size:18px; } /deep/ .el-input__clear{ font-size:18px }

element-ui修改样式的方法

qq_51011357的博客

12-07

2585

第一种全局引入css文件的方式，适合于对elementUI整体的修改，比如整体配色的修改；第二种添加一个style标签的形式，也能够实现修改默认样式的效果，但实际上因为是修改了全局的样式，因此在不同的vue组件中修改同一个样式有可能会有冲突。第三种方式通过 /deep/ 的方式可以很方便的在vue组件中修改默认样式，也不会于其他页面有冲突。第四种方式局限性比较大，可以使用，但不推荐使用。

vue element-ui实现input输入框金额数字添加千分位

10-15

作者在文章中提到，使用Element-UI中的`<el-input>`组件，可以较为方便地实现输入框的功能。 2. 千分位格式化方法实现文章中提供了util.js文件，定义了几个关键方法，用于处理金额的千分位格式化。核心函数是`...

【区分vue2和vue3下的element UI Input 输入框组件，分别详细介绍属性，事件，方法如何使用，并举例】

xiejunlan的博客

05-30

1193

在 Vue 2 中，Element UI 提供了el-input组件用于输入框功能。而在 Vue 3 中，Element UI 没有直接支持 Vue 3，但有一个名为 Element Plus 的项目提供了与 Element UI 类似但支持 Vue 3 的组件集。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中el-input组件的属性、事件和方法，并给出示例。

Element Input输入框的使用方法

10-15

在 Element UI 中，`Input` 输入框是基础且重要的组件之一，用于用户输入文本数据。本篇文章将深入探讨 `Element Input` 输入框的使用方法。 ### 基础用法 `<el-input>` 组件是最基本的输入框，可以通过 `v-model`...

【Vue+Element-UI】el-input使用clearable后出现两个关闭图标

╭じò ぴé╮。Qi

08-13

1417

处理element-ui使用过程中出现的问题，根据业务需要封装了带搜索条件的组件，在el-input组件上使用clearable后，出现了两个关闭图标的现象。

vue中修改element-ui组件样式的方法

华工Web练习生

04-21

1800

如果想局部地改变element-ui组件的样式，而又不想去除scoped属性，造成组件之间的样式污染。可以通过>>>，穿透scoped。上代码： <el-input class="searchInput" v-model="searchInput" clearable placeholder="搜索" prefix-icon="el-icon-search"> ...

Element表单el-input嵌入按钮样式修改

m0_50115641的博客

02-07

6288

Element表单el-input嵌入el-button后修改边框、颜色、图标

【ElementUI样式优化】el-input带自定义查询删除图标 ==＞图标点击可实现对应功能 ==＞一个input实现查询重置功能

Sabrina_cc的博客

08-03

7659

【ElementUI样式优化】el-input带自定义查询删除图标 ==> 图标点击可实现对应功能 ==> 一个input实现查询重置功能效果概览：修改el-input样式。外层是框框，内层是input和i，实现点击查询图标查询、点击取消按钮清空form的同时重置查询结果。...

实现el-input后缀图标和clearable的兼容以及竖线分割

AzeShinja的博客

01-04

4086

经常能遇到一个需求，需要做成如下的样子但是总所周知，element的clearable和后缀图标时位置是冲突的，他会这样: 造成这样的原因是因为：所以我们只要把他们的父级内容改为反序的不就行了，所以 ::v-deep { .el-input__suffix { // 处理前缀图标不垂直居中的问题 height: auto; font-size: 20px; &-inner { flex-direction: row-rev.

修改el-input叉号的样式

yaoduqu的博客

03-09

2159

修改el-input清除按钮样式莫名其妙叉号样式不知道跟哪里冲突了，修改一下即可 <style lang="less" scoped> /deep/ .el-input .el-input__suffix { .el-input__suffix-inner { .el-icon-circle-close.el-input__clear { font-size: 12px; } } } </style> 完美！！！ ...

修改Element-plus可清空Input的样式

weixin_47330492的博客

04-12

981

上图是Element-plus UI中自带的清空icon。下面图片是更改后的清空icon。

实习关于快速修改element ui中input框的样式问题

weixin_54241625的博客

07-18

3083

需求是需要把input框中clearable带出的icon样式也进行修改。我认为他是用的这个里面的那个el-icon-error的content。虽然感觉每一个的content都一样，但是复制到代码里面显示是不一样的。如果再用slot的话，就要自己写点击清除功能，还有一些另外的逻辑。可以f12查看每一个图标的content复制过去。这里的suffix只是修改尾部的icon样式。这里两种方式，直接用css来控制。由于需要根据ui设计成这个样子。......

vue 改变iview UI的原样式

小武的博客

11-26

743

/deep/ 加上原样式的css即可，比如input输入框 /deep/ .ivu-input { border-radius: 20px; }

element ui input输入框限制输入小数位数

06-03

你可以使用 Element UI 的 el-input 组件的 formatter 属性来限制输入的小数位数。例如，设置 formatter 为一个函数，将输入值格式化为小数点后两位。示例代码如下： ```html <template> <el-input v-model="value" :formatter="formatValue"></el-input> </template> <script> export default { data() { return { value: '' } }, methods: { formatValue(value) { // 将输入值格式化为小数点后两位 if (value) { value = parseFloat(value.toString().replace(/[^\d.]/g, '')).toFixed(2); } return value; } } } </script> ``` 这样用户在输入时，如果输入了超过两位小数，也会被自动截断为两位小数。同时，如果用户输入了非法字符，如字母、符号等，也会被自动过滤掉。