【CSS】设置按钮disabled时的样式

还原一下写此文的场景：微信小程序中，点击button，设置disabled的值为true时，button样式就变灰了：

button标签：

<button class='bottomBtn' bindtap="doWorkBtn" disabled="{{btnDisabled}}">btn</button>

button样式：

.bottomBtn {width: 100%;height: 49px;font-size: 18px;color: white;background: #730000;border-radius: 0;
}

点击事件：

 doWorkBtn: function () {this.setData({btnDisabled: true,})},

点击前和点击后效果如下：

可以清楚的看到，设置了disabled为true属性后，button背景颜色和字体颜色都变了。

那么如何修改默认样式？很简单，在css中添加下面的样式即可：

/** 必须提升样式优先权(!important) **/
button[disabled] {color: white !important;background: #730000 !important;
}

【CSS】设置按钮disabled时的样式相关推荐

css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
【Qt】使用QPalette设置按钮颜色时，不生效
1.问题描述在练习QStylePlugin示例时,通过插件将按钮颜色设置为红色,但是没有效果,原因是: 使用QPalette设置按钮颜色时,不生效,代码如下 QPalette.setBrush(QP ...
考虑到可访问性，使用 CSS 设置按钮样式
按钮在网站上有很多用途--有用于悬停在图像上和在网页上导航的大按钮,以及用于显示有关您的产品或服务的信息的更微妙的按钮. 然而,按钮甚至可以吓倒经验丰富的网页设计师. 按钮有许多可能需要很长时间才能掌 ...
css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
微信小程序设置button禁用时的样式disabled
/* 设置不可用状态的背景色 */ button[disabled]{background-color: #ccc; }
css设置按钮竖直方向居中_如何借助伪元素实现垂直居中？
点击右上方红色按钮关注"小郑搞码事",每天都能学到知识,搞懂一个问题! 今天给大家讲一种实现垂直居中的方法:伪元素法(::before/::after) 一.vertical-al ...
css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决
问题描述按钮样式为图标+文字,在使用flex布局写垂直居中时,iphone7手机上文字和图标却没有居中,居左显示.代码如下(已精简): {{ confirmButtonText }} ... but ...
CSS设置原生table表格边框样式（添加表格横线）（附最后表格td画斜线）
table表格边框样式: 推荐这种原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
css设置按钮竖直方向居中_css实现垂直居中6种方法
在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题. 1.如果是单行文本.看代码: Document ...

【CSS】设置按钮disabled时的样式

【CSS】设置按钮disabled时的样式相关推荐

最新文章

热门文章