Why is a Button's text not subject to css style rules on the container containing the button?

Question

Let's say i have the following ASP.NET/CSS code:

<div style="color:Red;"> some text...<asp:Button runat="server" ID = "Button1" Text = "ABC" /> </div>

The "some text" part would be red but the text of the button is not red. Why? If I place a label in place of the button, the label's text would be red.

Answer 1

I suggest you use Firebug for Firefox to inspect the rendered html and the CSS styles that are acting on it.

An <asp:Button /> control does not render to a label, it renders to a HTML <input /> tag.

Your default styles for a <label /> and a <input /> could be completed different. A quick fix would be:

<style type="text/css">.red { color:Red!important; }</style>

<asp:button id="myButton" class="red" runat="server">My Button Text</asp:button>