样式禁用CSSbutton

我试图改变一个embedded式图像的button样式，如下面的小提琴：

http://jsfiddle.net/krishnathota/xzBaZ/1/

在这个例子中，恐怕没有图像。

我试图：

1. 禁用时更改button的background-color
2. 禁用时更改button中的图像
3. 禁用时禁用hover效果
4. 当您点击button中的图像并拖动时，图像可以被单独看到; 我想避免这一点
5. 可以selectbutton上的文字。 我也想避免这一点。

我试图在button[disabled] 。 但是有些效果不能被禁用。 像top: 1px; position: relative; top: 1px; position: relative; 和形象。

Answer 1

对于禁用的button，您可以使用:disabled伪元素。 它适用于所有元素。

对于仅支持CSS2的浏览器/设备，可以使用[disabled]select器。

与图像一样，不要在button中放置图像。 使用CSS background-image和background-position和background-repeat 。 这样，图像拖动不会发生。

select问题：这里是一个具体问题的链接：

• 如何禁用文本select突出显示使用CSS？

禁用select器的示例：

 button { border: 1px solid #0066cc; background-color: #0099cc; color: #ffffff; padding: 5px 10px; } button:hover { border: 1px solid #0099cc; background-color: #00aacc; color: #ffffff; padding: 5px 10px; } button:disabled, button[disabled]{ border: 1px solid #999999; background-color: #cccccc; color: #666666; } div { padding: 5px 10px; } 

 <div> <button> This is a working button </button> </div> <div> <button disabled="true"> This is a disabled button </button> </div> 

Answer 2

我认为你应该能够使用以下选项来禁用button：

 button[disabled=disabled], button:disabled { // your css rules } 

Answer 3

在页面中添加下面的代码。 相信我，不改变button事件，禁用/启用button只需在Javascript中添加/删除button类。

方法1

  <asp Button ID="btnSave" CssClass="disabledContent" runat="server" /> <style type="text/css"> .disabledContent { cursor: not-allowed; background-color: rgb(229, 229, 229) !important; } .disabledContent > * { pointer-events:none; } </style> 

方法2

 <asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" /> <style type="text/css"> .btn-disable { cursor: not-allowed; pointer-events: none; /*Button disabled - CSS color class*/ color: #c0c0c0; background-color: #ffffff; } </style> 

Answer 4

为禁用的button应用灰色buttonCSS。

 button[disabled]:active, button[disabled], input[type="button"][disabled]:active, input[type="button"][disabled], input[type="submit"][disabled]:active, input[type="submit"][disabled] , button[disabled]:hover, input[type="button"][disabled]:hover, input[type="submit"][disabled]:hover { border: 2px outset ButtonFace; color: GrayText; cursor: inherit; background-color: #ddd; background: #ddd; } 

Answer 5

 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, { // apply css here what u like it will definitely work... } 

Answer 6

当你的button被禁用时，它直接设置不透明度。 所以首先我们必须把它的不透明度设置为

 .v-button{ opacity:1; } 

Answer 7

对于我们所有使用bootstrap的人，可以通过添加“disabled”类并使用以下方法来更改样式：

HTML

 <button type="button"class="btn disabled">Text</button> 

CSS

 .btn:disabled, .btn.disabled{ color:#fff; border-color: #a0a0a0; background-color: #a0a0a0; } .btn:disabled:hover, .btn:disabled:focus, .btn.disabled:hover, .btn.disabled:focus { color:#fff; border-color: #a0a0a0; background-color: #a0a0a0; } 

请记住，添加“禁用”类不一定会禁用button，例如在提交表单中。 要禁用其行为，请使用disabled属性：

 <button type="button"class="btn disabled" disabled="disabled">Text</button> 

有一些例子的工作小提琴可以在这里find 。

Answer 8

通过CSS：

 .disable{ cursor: not-allowed; pointer-events: none; } 

他们可以添加任何装饰到该button。 为了改变状态，你可以使用jQuery

 $("#id").toggleClass('disable');