CSS style: How to differentiate whether input is a button or a text box page 1/4

What do you think of when you see the <input> HTML Tag? A text box? A button? A single queue? A check box ?...... Yes, yes, yes, they are all right. Maybe you may not think of it. This small input can actually create 10 different things. Below is a list to see which ones you didn't think:
<Input type = "text"/> text box
<Input type = "password"/> Password box
<Input type = "Submit"/> submit button
<Input type = "reset"/> Reset button
<Input type = "radio"/> single worker
<Input type = "checkbox"/> check box
<Input type = "button"/> normal button
<Input type = "file"/> file selection Control
<Input type = "hidden"/> hide box
<Input type = "image"/> image button
Therefore, you may say that input is really a great thing, and it is actually a "starting". But when you try to set different styles for different controls in the project, you will find that the input can really increase the size of your header ". I don't know why I had to assign so many identities to input, but his "N-ID" has indeed brought a lot of trouble to website designers. Fortunately, the working people are great, and there are still some solutions to the problem ~, Although they all have their own fatal flaws, orz... The Liberation method is roughly summarized as follows (younger siblings are sparse and mistakes are inevitable. Please advise me ):

1. Use CSS expression to determine the expression
2. Use the type selector in CSS
3. implemented using JavaScript scripts
4. If you use Microsoft Visual Studio 2005 or later, congratulations, you can also use skin.

The following describes the detailed implementation of each method and their advantages and disadvantages.

1: Use the CSS expression to determine the expression
Implementation Code Refer: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Title > Diffinput2 </ Title >
< Meta Name = "Author" Content = "Justinyoung" />
< Meta Name = "Keywords" Content = "" />
< Meta Name = "Description" Content = "" />
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" />
< Style Type = "Text/CSS" >
Input
{
Background-color : Expression (this. type = "text "? '# Ffc ':'') ;
}
</ Style >
</ Head >

< Body >
< DL >
< DT > This is normal textbox: < Dd > < Input Type = "Text" Name = "" >
< DT > This is normal button: < Dd > < Input Type = "Button" Value = "I'm button" >
</ DL >
</ Body >
</ Html >

Advantages: simple and lightweight
Disadvantage: The expression judgment Expression Firefox does not support. It is fatal that only one can be distinguished (for example, only text boxes can be distinguished). Do not try to set multiple ones. The following will overwrite orz...