【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;}