使用CSS样式禁用按钮

Question

使用CSS样式禁用按钮

css

414

我试图改变一个带有嵌入式图像的按钮的样式，如下面的Fiddle所示：

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

在这个例子中没有图片，很抱歉。

我想做到以下几点：

禁用时更改按钮的background-color
禁用时更改按钮中的图像
禁用时禁止悬停效果
点击按钮中的图像并拖动时，可以单独查看图像；我想避免这种情况
按钮上的文本可以被选择。我也想避免这种情况

我尝试使用button[disabled]。但是有些效果无法禁用，例如top: 1px; position: relative;和图像。

- Krishna Thota

14个回答

114

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

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

- Billy Moat

我能禁用Hover吗？我听说在IE6中不起作用？ - Krishna Thota

我不确定，但我认为你不能这样做。如果您还可以将“禁用”按钮添加到禁用按钮的类中，则可能可以通过该类完成此操作。 - Billy Moat

51

在您的页面中添加以下代码。不需要更改按钮事件，只需在JavaScript中添加/删除按钮类即可禁用/启用按钮。 方法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>

- Tamilselvan K

为了让按钮变为禁用状态，请添加以下 CSS 代码： color: #c0c0c0; background-color: #ffffff; - Tamilselvan K

抱歉，但这个按钮看起来不同，但仍然可以在我的FireFox中被点击并触发onclick事件，所以我不明白。 - McVitas

13

通过CSS：

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

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

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

- Alvargon

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

- ngrashia

8

考虑以下解决方案

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}

- Sahil Ralkar

这个解决方案会增加正在构建的应用/服务的弱点。 - Franco Gil

1

@FrancoGil 你是对的，但这可以是实现禁用按钮的一种方式。 - Sahil Ralkar

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

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

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

这里有一个带有一些示例的可用作参考的代码片段，点击此处查看。

- c-chavez

5

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

.v-button{
    opacity:1;    
}

- kushal Baldev

4

需要按照以下方式应用CSS：

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }

- Nagnath Mungade

2

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

- Chetan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- beerwin · Accepted Answer

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

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

与图像一样，不要将图像放在按钮中。使用CSS background-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>