CODEWITHSUNDEEP
javascripthtmlcssforms
user1022585
user1022585

Reputation: 13661

CSS for disabled form input

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?

Upvotes: 1

Views: 6716

Answers (4)

Bergi
Bergi

Reputation: 665546

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.

Upvotes: 0

graphicdivine
graphicdivine

Reputation: 11231

input[disabled]{
  styles here
}

Upvotes: 2

Josh Earl
Josh Earl

Reputation: 18361

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.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324820

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).

Upvotes: 3

Related Questions