CSS按鈕禁用狀態？

我是新的CSS，我應該如何定義我的CSS類捕獲按鈕的禁用狀態？有我的CSS類，但它沒有工作。CSS按鈕禁用狀態？

.mbutton:disabled{ 
background: transparent; 
}

編輯

還有的jsfiddle例如， http://jsfiddle.net/sefiktemel/v7h9gczu/

來源

2015-06-08 AsyncTask

分享你的HTML代碼或把這個小提琴手...... –

似乎是工作如下預期：HTTP ：//jsfiddle.net/wacuh2bd/ –

什麼都不起作用？ – Xufox

如果您使用的是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

來源

2015-06-09 01:38:54

謝謝Guilherme，它的工作原理，但我也需要禁用時更改backgroun-ımage。 mbutton css類的「背景圖像」本性不起作用，你有什麼想法嗎？ – AsyncTask

什麼是您的瀏覽器？我只使用Chrome v43測試了這個版本 –

我使用相同版本的Chrome，可以通過setDisabled（true）方法使用mbutton類更改extJS中的背景圖像嗎？ – AsyncTask

Made even better. 

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

}

這裏：http://jsfiddle.net/chtah59g/1/

來源

2015-06-08 22:29:17

你在正確的軌道上。

<!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>

來源

2015-06-08 22:30:31 Jonathan

抱歉，我正在使用ExtJS 5，我沒有定義類似於您的答案的按鈕。我設置禁用按鈕「button.setDisabled（true）」代碼。但它不起作用。 – AsyncTask

當您檢查瀏覽器中的元素時，該按鈕實際上是否被禁用？ – Jonathan

看起來像這樣; class =「x-btn x-unselectable x-box-item x-btn-default-small x-item-disabled x-btn-disabled everyone-button-disabled」 – AsyncTask

CSS按鈕禁用狀態？

回答

相關問題