328

我正在尝试使用嵌入图像更改按钮的样式，如下面的小提琴所示：

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

恐怕在示例中没有图像。

我试着：

  1. background-color禁用时更改按钮的
  2. 禁用时更改按钮中的图像
  3. 禁用时禁用悬停效果
  4. 当你点击按钮中的图像并拖动它时，可以单独看到图像；我想避免这种情况
  5. 可以选择按钮上的文本。我也想避免这种情况。

我试着在button[disabled]. 但有些效果无法禁用。喜欢 top: 1px; position: relative;和形象。

4

11 回答 11

490

对于禁用的按钮，您可以使用:disabled伪类。它适用于所有具有disabledAPI 的元素（通常是表单元素）。

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

与图像一样，不要将图像放在按钮中。将 CSSbackground-image与background-position和一起使用background-repeat。这样，图像拖动就不会发生。

选择问题：这里是具体问题的链接：

禁用选择器的示例：

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> This is a disabled button </button>
</div>

于 2013-02-07T11:47:18.093 回答
102

我认为您应该能够使用以下方法选择禁用的按钮：

button[disabled=disabled], button:disabled {
    // your css rules
}
于 2013-02-07T11:41:57.757 回答
40

在您的页面中添加以下代码。没有对按钮事件进行任何更改，禁用/启用按钮只需在 JavaScript 中添加/删除按钮类。

方法一

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

方法二

<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>
于 2014-12-23T14:20:45.317 回答
11

为禁用的按钮应用灰色按钮 CSS。

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;
}
于 2015-06-02T10:10:19.897 回答
11

通过CSS：

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

他们可以为该按钮添加任何装饰。要更改状态，您可以使用jquery

$("#id").toggleClass('disable');
于 2017-11-13T15:33:00.437 回答
7

对于我们所有使用引导程序的人，您可以通过添加“禁用”类并使用以下内容来更改样式：

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

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

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

此处提供了一些示例的工作小提琴。

于 2017-09-24T11:50:19.980 回答
5

考虑以下解决方案

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}
于 2019-10-09T07:25:49.480 回答
5

当您的按钮被禁用时，它会直接设置不透明度。所以首先我们必须将它的不透明度设置为

.v-button{
    opacity:1;    
}
于 2017-05-30T04:44:46.950 回答
4

需要如下应用css：

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }
于 2019-08-02T06:36:41.000 回答
2 
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}
于 2014-09-20T06:06:50.597 回答
1

如果您将样式 (.css) 文件更改为 SASS (.scss)，请使用：

button {
  background-color: #007700;
  &:disabled {
    background-color: #cccccc;
  }
}
于 2019-04-03T12:23:09.913 回答