Style disabled button with CSS
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:
- Change the
background-color
of the button when it is disabled - Change the image in the button when it is disabled
- Disable the hover effect when disabled
- When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
- 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.
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>
I think you should be able to select a disabled button using the following:
button[disabled=disabled], button:disabled {
// your css rules
}