remove shadow from INPUT BUTTON ... DISABLED

Hello,

Somewhere in my code I have
<input TYPE="button" NAME="btnFirst" VALUE="<<" OnClick="GetFile('1')"
DISABLED>

I changed the layout of the INPUT with a stylesheet to

INPUT {
color: #FFFFFF;
background: #000000;
text-shadow: none;
}

However, the 'shadow' of a disabled button is NOT removed.

How can I set the color of a disabled button to a custom color?
Is it possible to set a different color for the border and the text?
How can I apply these settings to only a BUTTON, and no other INPUT fields?

tia

bartp

--

==========================================
Hyper A.R.T.
bart plessers
Paul Van Ostaijenlaan 4
3001 Heverlee
BELGIUM
tel: +32 (16) 23.40.85
fax: +32 (16) 23.41.06
==========================================

bart plessers wrote:

input TYPE="button" ... DISABLED
INPUT {
text-shadow: none;
}

However, the 'shadow' of a disabled button is NOT removed.

(a) text-shadow has no (AFAIK) browser support
(b) that isn't a shadow, its a border

How can I set the color of a disabled button to a custom color?

input[disabled] { color: #faa; }*

Is it possible to set a different color for the border and the text?
How can I apply these settings to only a BUTTON, and no other INPUT
fields?

input[type=button] {}*

* MSIE doesn't support attribute selectors. If you care about this behind
the times browser you have to use classes instead.

--
David Dorward http://dorward.me.uk/

* MSIE doesn't support attribute selectors. If you care about this behind
the times browser you have to use classes instead.

what do you mean by this?
Currently I use
<TAG class="mystyle"> qsdfqsdf </TAG>

where mystyle is defined in a stylesheet like:

..mystyle {.....}


Here is my sample HTML
++++++++++++++++++++++++++++++++++++++++
<input TYPE="button" NAME="btnFirst" VALUE="<<" OnClick="GetFile('1')"
DISABLED class="MyButton">
<input TYPE="button" NAME="btnPrevious" VALUE="<" OnClick="GetFile('-11')"
DISABLED class="MyButton">
<input TYPE="button" NAME="btnClose" VALUE="#" OnClick="GetTable('1')"
class="MyButton">
<input TYPE="button" NAME="btnNext" VALUE=">" OnClick="GetFile('13')"
class="MyButton">
<input TYPE="button" NAME="btnLast" VALUE=">>" OnClick="GetFile('24')"
class="MyButton">
++++++++++++++++++++++++++++++++++++++++


And my stylesheet
++++++++++++++++++++++++++++++++++++++++
INPUT[type=button] {background: Green;}
INPUT[disabled] {background: Lime;}
..MyButton {background: Maroon;}
..MyButton[disabled] {background: Red;}
++++++++++++++++++++++++++++++++++++++++


On Internet Explorer, the class MyButton is displayed, but no difference is
made between 'enabled' and 'disabled', all the buttons are "Maroon"

On Netscape Navigator,
enabled buttons are 'Green' (from INPUT), disabled are 'Red' (from
class="MyButton" )

On Opera
enabled buttons are 'Green' (from INPUT), disabled are 'Red' (from
class="MyButton" )


Do you have any about those inconsistencies?
It seems to me that styles for tags and styles for classes are mixed...


Do you have a tip how to
- have different styles for enabled/disabled buttons in MSIE (without the
need to assign different classes)
- have a consistent layout in MSIE, Navigator and opera (and other...)?

thanx in advance,

bartp



--
HyperART
Paul Van Ostaijenlaan 4
3001 Heverlee

"David Dorward" <dorward (AT) yahoo (DOT) com> wrote

bart plessers wrote:

input TYPE="button" ... DISABLED
INPUT {
text-shadow: none;
}

However, the 'shadow' of a disabled button is NOT removed.

(a) text-shadow has no (AFAIK) browser support
(b) that isn't a shadow, its a border

How can I set the color of a disabled button to a custom color?

input[disabled] { color: #faa; }*

Is it possible to set a different color for the border and the text?
How can I apply these settings to only a BUTTON, and no other INPUT
fields?

input[type=button] {}*

* MSIE doesn't support attribute selectors. If you care about this behind
the times browser you have to use classes instead.

--
David Dorward http://dorward.me.uk/

Bart Plessers (artabel) wrote:

* MSIE doesn't support attribute selectors. If you care about this behind
the times browser you have to use classes instead.

what do you mean by this?
Currently I use
TAG class="mystyle"> qsdfqsdf </TAG

where mystyle is defined in a stylesheet like:

.mystyle {.....}

Yes, this is a class selector
<http://www.w3.org/TR/CSS21/selector.html#class-html>.

...

And my stylesheet
++++++++++++++++++++++++++++++++++++++++
INPUT[type=button] {background: Green;}
INPUT[disabled] {background: Lime;}
..MyButton {background: Maroon;}
..MyButton[disabled] {background: Red;}
++++++++++++++++++++++++++++++++++++++++

These ([attr=val]) are attribute selectors
<http://www.w3.org/TR/CSS21/selector.html#attribute-selectors> which
are not supported in IE.

On Internet Explorer, the class MyButton is displayed, but no difference is
made between 'enabled' and 'disabled', all the buttons are "Maroon"

...

Do you have any about those inconsistencies?
It seems to me that styles for tags and styles for classes are mixed...

What do you mean "... are mixed"?

Do you have a tip how to
- have different styles for enabled/disabled buttons in MSIE (without the
need to assign different classes)

AFAIK, no way. You may try some of the groups on the
msnews.microsoft.com server or browse/search the MSDN Library
<http://msdn.microsoft.com/library>.

- have a consistent layout in MSIE, Navigator and opera (and other...)?

Experiment, see what works, where, and find/search for specific
issue (when you enconter such) workarounds - you may ask in the groups.

--
Stanimir

What do you mean "... are mixed"?

Well, I my example, for NetScape:

HTML
++++++++++++++++++++++++++++++++++++++++
<input TYPE="button" NAME="btn1" VALUE="<<" DISABLED class="MyButton">
<input TYPE="button" NAME="btn2" VALUE="<<" class="MyButton">
++++++++++++++++++++++++++++++++++++++++


StyleSheet
++++++++++++++++++++++++++++++++++++++++
INPUT[type=button] {background: Green;}
INPUT[disabled] {background: Lime;}
..MyButton {background: Maroon;}
..MyButton[disabled] {background: Red;}
++++++++++++++++++++++++++++++++++++++++

btn1 becomes red ->> settings from .MyButton definition
btn2 becomes green ->> settings from INPUT definition --> NOT logic

In my opinion, btn2 should becom Maroon, because
- it has class MyButton
- it is enabled

so it should have definition of .MyButton (maroon) and NOT definition of
INPUT (green)


Definitions are 'mixed' here.

any idea?

tia
bartp



--
HyperART
Paul Van Ostaijenlaan 4
3001 Heverlee

"Stanimir Stamenkov" <s7an10 (AT) netscape (DOT) net> wrote

Bart Plessers (artabel) wrote:

* MSIE doesn't support attribute selectors. If you care about this
behind
the times browser you have to use classes instead.

what do you mean by this?
Currently I use
TAG class="mystyle"> qsdfqsdf </TAG

where mystyle is defined in a stylesheet like:

.mystyle {.....}

Yes, this is a class selector
http://www.w3.org/TR/CSS21/selector.html#class-html>.

...

And my stylesheet
++++++++++++++++++++++++++++++++++++++++
INPUT[type=button] {background: Green;}
INPUT[disabled] {background: Lime;}
..MyButton {background: Maroon;}
..MyButton[disabled] {background: Red;}
++++++++++++++++++++++++++++++++++++++++

These ([attr=val]) are attribute selectors
http://www.w3.org/TR/CSS21/selector.html#attribute-selectors> which
are not supported in IE.

On Internet Explorer, the class MyButton is displayed, but no difference
is
made between 'enabled' and 'disabled', all the buttons are "Maroon"

...

Do you have any about those inconsistencies?
It seems to me that styles for tags and styles for classes are mixed...

What do you mean "... are mixed"?

Do you have a tip how to
- have different styles for enabled/disabled buttons in MSIE (without
the
need to assign different classes)

AFAIK, no way. You may try some of the groups on the
msnews.microsoft.com server or browse/search the MSDN Library
http://msdn.microsoft.com/library>.

- have a consistent layout in MSIE, Navigator and opera (and other...)?

Experiment, see what works, where, and find/search for specific
issue (when you enconter such) workarounds - you may ask in the groups.

--
Stanimir

Sorry for the large quote. See my comment bellow.

Bart Plessers (artabel) wrote:

What do you mean "... are mixed"?


HTML
++++++++++++++++++++++++++++++++++++++++
input TYPE="button" NAME="btn1" VALUE="<<" DISABLED class="MyButton"
input TYPE="button" NAME="btn2" VALUE="<<" class="MyButton"
++++++++++++++++++++++++++++++++++++++++

StyleSheet
++++++++++++++++++++++++++++++++++++++++
INPUT[type=button] {background: Green;}
INPUT[disabled] {background: Lime;}
..MyButton {background: Maroon;}
..MyButton[disabled] {background: Red;}
++++++++++++++++++++++++++++++++++++++++

btn1 becomes red ->> settings from .MyButton definition
btn2 becomes green ->> settings from INPUT definition --> NOT logic

In my opinion, btn2 should becom Maroon, because
- it has class MyButton
- it is enabled

so it should have definition of .MyButton (maroon) and NOT definition of
INPUT (green)

Definitions are 'mixed' here.

This is related to the selector's specificity
<http://www.w3.org/TR/CSS21/cascade.html#specificity>. If two
selectors have equal specificity you could change their order of
appearance but in your case:

..MyButton {background: Maroon;}
..MyButton[disabled] {background: Red;}

The second selector has higher specificity so it doesn't matter if
you change the order.

--
Stanimir