修改elementui(饿了么)button(按钮)is-disabled的样式影响其他例如输入框disabled的样式

// 如果直接写一个全局样式的话,直接写成如下,所有组件的禁用样式都会受影响力

.is-disabled{

        background-color: pink;

}

// 比如输入框加一个:disabled='true',那输入框的背景色就会变成粉色,必须添加作用域才可以,比如外面嵌套一个带类名的div

// html

<div class='ipt-warp'>

        <el-input :disabled='true'  />

</div>

<div class='btn-warp'>

        <el-button type='primary' :disabled='true'  />

</div>

// 样式部分

<style lang='less' scoped>

/deep/ .btn-warp{

        .is-disabled{

                background-color: pink

        }

}

// ⚠️⚠️⚠️⚠️⚠️⚠️可以这么写更改el-button的样式

// 主要是这里 注意.el-button--primary和.is-disabled之间没有空格

.el-button--primary.is-disabled{

        background-color: #333

        // 或者修改hover active等

        &:hover{

                background-color: #ddd

        }

}

// 同理其他按钮类型可以写 .el-button--danger.is-disabled{ ...样式 }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是关于CSS设置输入框初始状态和禁用状态下“发送”按钮样式代码: 假设我们有一个input和button标签,分别用于输入和发送消息。我们可以使用CSS来设置输入框按钮样式,包括其初始状态和禁用状态。 首先,我们给输入框和发送按钮分别添加一个class名称: ```html <!-- 输入框 --> <input type="text" class="input-box"> <!-- 发送按钮 --> <button class="send-btn">发送</button> ``` 然后,我们编写CSS样式代码,设置输入框按钮样式: ```css /* 输入框初始样式 */ .input-box { border: 1px solid #ccc; padding: 10px; font-size: 16px; } /* 发送按钮初始样式 */ .send-btn { background-color: blue; color: #fff; padding: 10px; border: none; font-size: 16px; cursor: pointer; } /* 输入框禁用样式 */ .input-box[disabled] { background-color: #eee; color: #999; cursor: not-allowed; } /* 发送按钮禁用样式 */ .send-btn[disabled] { background-color: #ddd; color: #999; cursor: not-allowed; } ``` 在上述代码中,我们首先定义了输入框和发送按钮的初始样式,包括其边框、内边距、字体大小、背景色等。然后,我们使用属性选择器来定义输入框和发送按钮的禁用样式,当禁用属性为真时,输入框和发送按钮的背景色、字体颜色和指针样式都将发生改变。 最后,我们可以使用JavaScript来动态切换输入框按钮的禁用状态。例如,当输入框为空时,我们可以禁用发送按钮: ```javascript var inputBox = document.querySelector('.input-box'); var sendBtn = document.querySelector('.send-btn'); if (inputBox.value === '') { sendBtn.disabled = true; } else { sendBtn.disabled = false; } ``` 这样,当输入框为空时,发送按钮将变为禁用状态,样式也将发生相应改变。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值