Question

我是CSS新手，我应该如何为catch按钮的禁用状态定义我的CSS类？有我的CSS课程，但它没有工作。

.mbutton:disabled{
background: transparent;
}

修改

有JSfiddle的例子， http://jsfiddle.net/sefiktemel/v7h9gczu/

Answer 1

如果您使用的是ExtJS，则无效。您必须将自定义类添加到按钮，然后更改CSS以使用ExtJS。

按钮定义

Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        alert('You clicked the button!');
    }
});

Ext.create('Ext.Button', {
    text: 'Click me',
    disabled: true,
    renderTo: Ext.getBody(),
    disabledCls :  'x-item-disabled mbutton', // this will add you mbutton class
    handler: function() {
        alert('You clicked the button!');
    }
});

班级定义

.mbutton {
    background: transparent !important;
    cursor: not-allowed;
}

.mbutton .x-btn-inner {
    color: #666;
    cursor: not-allowed;
}

小提琴：https://fiddle.sencha.com/#fiddle/o93

Answer 2

Made even better.

.mbutton:disabled {
   cursor: not-allowed;
   background: transparent;

}

此处：http://jsfiddle.net/chtah59g/1/

Answer 3

你走在正确的轨道上。

<!DOCTYPE html>
<html>

  <head>
    <style>
      button.mybutton:disabled { color: red;
        background: blue;
      }
    </style>
  </head>

  <body>
    <h1>Hello</h1>
    <button class="mybutton" disabled>Click me</button>
    <button class="mybutton"  >Click me</button>

  </body>

</html>

请参阅http://plnkr.co/edit/3ZsqM8OHzcy7RogwBmwT?p=preview

另外，您是否尝试添加不透明度？

    <style>
      button.mybutton:disabled { 
        color: red;
        background: blue;
        opacity: 0.4;
      }
    </style>

CSS按钮禁用状态？

3 个答案: