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