Using :disabled in CSS disabled button style b0rks IE8

Question

I have created a custom CSS button class called linkbutton. It is intended to work on both a and input as sometimes calls to action will be links and other times they will be real submit buttons. In this case an anchor setup like so doesn't render properly

<a href="" class="linkbutton disabled" id="folderManagementAdd">
    <i class="icon-plus"></i>
    <span>Add Sub Folder</span>
</a>

CSS:

.linkbutton.disabled, input[disabled=disabled].linkbutton, input:disabled.linkbutton
{
    color: #ccc;
}

    .linkbutton.disabled:hover, input[disabled=disabled].linkbutton:hover, input:disabled.linkbutton:hover
    {
        color: #ccc;
        box-shadow: none;
        border: 1px solid gainsboro;
        cursor: default;
    }

In IE8 this only works when I dont use the input:disabled section at the end (which I need for real browsers). Is there something I can do to get around this? I really dont want to specify the CSS twice!

Wouldn't `input[disabled].linkbutton:hover` cover all* browser scenarios? (*) the majority — CodingIntrigue, Aug 29 '13 at 14:52

Derek · Accepted Answer · 2017-06-01T18:29:36.350

3

IE8 ignores the rule, since it doesn't understand :disabled.

A little research goes a long way: How do you style disabled textarea in IE8?

edited Jun 01 '17 at 18:29

answered Aug 29 '13 at 14:52

Derek

3,438
1
17
35

Im sure I tried exactly that and it didn't work before, it works though now cheers – Chris Aug 29 '13 at 14:57

Using :disabled in CSS disabled button style b0rks IE8

1 Answers1