Style disabled button with CSS

Question

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/

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

I'm trying to:

1. Change the background-color of 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.

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

Answer 1

For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).

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

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

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>