设置el-input或el-select组件disabled时，修改placeholder文本样式

原创 已于 2024-06-25 13:22:52 修改 · 551 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 #elementui

于 2024-06-25 13:12:20 首次发布

设置el-select禁用状态下placeholder样式代码为：

/* 输入框或下拉选框禁用时：显示提示语 */
.el-input.is-disabled input::-webkit-input-placeholder {
  color: #606266 !important;
}

不生效记得加::v-deep 或者 /deep/哦

Vue - ElementUI 下拉选择器 el-select 覆盖修改 placeholder样式，详细解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式）
🏆 前端领域优质创作者
03-23 4288
vue，vue2，element-ui，el-select，下拉选择器，下拉选择框，Select选择器，修改边框颜色，select去掉边框，vue2+element中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，select弹出样式修改，修改下拉框el-select的样式，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementUI
解决elementUI select 的disabled属性设置无效问题一例
10-27 6760
解决elementUI select 的disabled属性设置无效问题一例
element el-select+el-checkbox多选实现二级联动单个选项禁用效果以及选中选项对应表头高亮:header-cell-style（中级）
敲代码无敌小奶龙的博客
01-14 4323
element el-select+el-checkbox多选实现下拉框二级联动+禁用单个选项+选中选项对应表头高亮。
disabled el-select禁用样式 修改 去掉禁用样式 disabled 变为 readonly
weixin_50885665的博客
02-27 2444
【代码】disabled el-select禁用样式 修改 去掉禁用样式。
修改el-select和el-input样式；修改element-plus的下拉框el-select样式；修改placeholder样式
i_am_a_div的博客
08-10 1万+
修改el-select样式；修改element-plus的下拉框el-select样式
vue3+ts封装el-select el-input通用组件
qq_45840993的博客
10-20 2928
vue3+ts封装e-select和el-input
Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式
🏆 前端领域优质创作者
03-23 1万+
vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，
<el-form-item label="产品编码"> <el-input v-model="selectForm.code" placeholder="请输入" clearable @keyup.enter="queryProduct" /> </el-form-item>
09-06
<el-input v-model="formData.password" type="password" disabled></el-input> </el-form-item> </el-form> export default { data() { return { formData: { email: '', password: '' } }; } }; ``...
el-select placeholder样式
最新发布
10-24
el-select组件placeholder样式的设置方法及示例如下： ### 修改普通状态下的placeholder样式 可以使用CSS修改el-select组件普通状态下的placeholder样式。以下是一个使用stylus的示例： ```stylus .select-btn >>> ...
el-select选择器 下拉菜单组件封装
江拥羡橙的博客
08-27 2068
我们都知道elementui的选择器组件（下拉菜单)局限性很多，比如说选项不能展示更多行内容，数据量太大的话卡顿（因为没有分页）等等。博主这里分享一个自己封装的组件，解决了这些所有问题，可展示多行内容，单选或多选，分页，禁用，输入搜索，在使用时更加的灵活。
el-input/el-select placeholder样式修改
qq_45327886的博客
09-04 1万+
element placeholder样式修改
【Element】修改el-select的placeholder
IU
11-12 4594
HTML使用示例（不完整） <el-select v-model="value" class="select-btn" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select&gt
el-select如何去掉placeholder属性
liuzaixi的博客
12-20 1328
注意：这种方式有时候会不生效可能会受其他文件样式影响如样式覆盖，组件属性继承等，所以可以通过修改样式来实现。找到项目里设置全局样式的文件，使用伪类选择器将placeholder属性文字颜色透明度设置成0。功能要求是：当el-select的disabled属性为true的时候不展示“请选择”字样。元素的 placeholder 属性，可以在代码中将其设置为空字符串。2、如果想要全局修改的话，可以使用css修改。
解决Element UI中el-input禁用状态的样式问题
qq_62685154的博客
09-09 3299
在使用Element UI进行前端开发时，我们经常会遇到需要自定义组件样式的情况。然而，当涉及到el-input组件的禁用状态（disabled）时，直接修改样式可能会遇到样式不生效或还原为初始样式的问题。这主要是因为Element UI内部对禁用状态有特定的样式处理，直接修改可能无法覆盖。本文将介绍三种解决el-input禁用状态样式问题的方法。
Vue el-input 中 readonly和disabled的区别详解
qq_43071699的博客
07-25 3120
主要区别readonly允许用户选择但不允许修改输入框中的文本，而disabled完全阻止用户与输入框进行任何交互。使用场景readonly更适用于用户需要查看但不需要修改的数据，而disabled适用于需要暂时移除输入框交互能力的情况。视觉反馈disabled输入框在视觉上通常会有更明显的禁用标志，而readonly输入框可能看起来与可编辑的输入框相似，具体取决于浏览器的默认样式和应用的 CSS。
el-input标签不同type的disabled样式调整（禁用,but要正常显示文字）
启猿泰坦的博客
05-17 1050
【代码】el-input标签不同type的disabled样式调整（禁用,but要正常显示文字）
Element UI输入框(input)动态绑定disabled属性
热门推荐
Crayon111的博客
04-14 1万+
效果图 这里是在表格里面给插入input输入框，但是在某个参数我们有固定值不需要使用input框，因此给这两个参数的input框加上disabled = true的属性，不允许用户进行修改 代码部分 //对应xxx参数 <template slot-scope="scope" slot="params"> <el-form-item> <el-input v-model="scope.row.params" :disabled="(scope.row.$index
antd select组件中input以及placeholder样式修改
weixin_44078378的博客
07-19 3755
代码】antdselect组件中input以及placeholder样式修改。
修改layui-select下拉框的placeholder提示语
winney07的博客
07-18 2201
如上图所示，使用了定位元素挡住了默认的placeholder，但是还是会显示”没有选项“这一项。因”所属项目“默认不选择，”账号“初始化时没有下拉框列表数据。”所属项目“默认不选择。”账号“下拉框的数据，是根据所选的”所属项目“进行动态渲染。鼠标放在select框上，是禁止图标，然而鼠标移到下拉框的向下箭头，光标显示为小手；而更换版本，可能会带来其他影响，而且layui也停更了。选择”所属项目“时，追加对应的数据，同时需要去除。点击下拉框时，弹出”需要选择所属项目“的提示语。所以干脆初始化时，将。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值