使用 CSS 禁用样式按钮

Style disabled button with CSS

提问by Krishna Thota

I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:

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

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

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

In the example there are no images, I'm afraid.

在示例中，恐怕没有图像。

I'm trying to:

我试图：

1. Change the background-colorof the button when it is disabled
2. Change the image in the button when it is disabled
3. Disable the hover effect when disabled
4. When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
5. The text on the button can be selected. I want to avoid that, too.

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

I tried doing in button[disabled]. But some effects could not be disabled. like top: 1px; position: relative;and image.

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

回答by beerwin

For the disabled buttons you can use the :disabledpseudo-element. It works for all the elements.

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

For browsers/devices supporting CSS2 only, you can use the [disabled]selector.

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

As with the image, don't put an image in the button. Use CSS background-imagewith background-positionand background-repeat. That way, the image dragging will not occur.

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

Selection problem:here is a link to the specific question:

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

• How to disable text selection highlighting?

• 如何禁用文本选择突出显示？

Example for the disabled selector:

禁用选择器的示例：

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>

回答by Billy Moat

I think you should be able to select a disabled button using the following:

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

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

回答by Tamilselvan K

Add the below code in your page. Trust me, no changes made to button events, to disable/enable button simply add/remove the button class in Javascript.

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

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

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

回答by Nishanthi Grashia

To apply grey button CSS for a disabled button.

为禁用的按钮应用灰色按钮 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;
}

回答by Alvargon

By CSS:

通过CSS：

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

Them you can add any decoration to that button. For change the status you can use jquery

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

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

回答by c-chavez

For all of us using bootstrap, you can change the style by adding the "disabled" class and using the following:

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

HTML

HTML

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

CSS

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

Remember that adding the "disabled" class doesn't necessarily disable the button, for example in a submit form. To disable its behaviour use the disabled property:

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

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

A working fiddle with some examples is available here.

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

回答by kushal Baldev

When your button is disabled it directly sets the opacity. So first of all we have to set its opacity as

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

.v-button{
    opacity:1;    
}

回答by Chetan

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

回答by Sahil Ralkar

consider the following solution

考虑以下解决方案

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

回答by Akostha

And if you change to scss use:

如果您更改为 scss 使用：

button {
  backgroud-color: #007700
  &:disabled {
    backgroud-color: #cccccc
  }
}