CSS for disabled form input

Question

I have this in my CSS file that styles input fields in a form:

input,textarea,input,select,input,checkbox {
    font-size:12px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    color:#98925C;
    background-color:#000;
    border:1px solid #413E22;
}

When I use a disabled on the form though (eg the submit button when pressed), it doesn't grey out like it should.

I have this in the submit button HTML

onclick="this.disabled=true;this.value=' done ';this.form.submit();"

How can i make it so the button greys out once clicked?

Niet the Dark Absol · Accepted Answer · 2012-01-25 22:34:22Z

3

It does gray out in IE. For other browsers, though, you need to specifically define your "disabled element" styles with:

:disabled {
    color: #6b849a;
    text-shadow: 1px 1px #ffffff;
    cursor: default;
}

Something like that (although you may have to apply !important if there are cascading issues).

answered Jan 25, 2012 at 22:34

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Earl · Accepted Answer · 2012-01-25 22:35:01Z

2

The issue is that your styles are overriding the browser defaults for a disabled form element.

You need to redefine the styles by specifying :disabled pseudoclass in your CSS.

Here's a jsFiddle that shows how it works.

answered Jan 25, 2012 at 22:35

Josh Earl

18.4k16 gold badges65 silver badges93 bronze badges

Comments

graphicdivine · Accepted Answer · 2012-01-25 22:35:36Z

2

input[disabled]{
  styles here
}

answered Jan 25, 2012 at 22:35

graphicdivine

11.3k7 gold badges35 silver badges60 bronze badges

1 Comment

Bergi Over a year ago

Ah, ok, the attribute reflects the property. I thought the whole form would be disabled, but then even the pseudoclass doesn't seem to work.

Bergi · Accepted Answer · 2012-01-25 22:39:07Z

0

Use the :disabled pseudoclass. This might not work in older browsers and will surely not work in IE, so you could also add a normal class to the form when disabling it.

answered Jan 25, 2012 at 22:39

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

CSS for disabled form input

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related