What do you think of when you see the <input> HTML tag? A text box? A button? A radio box? A check box? ...... Yes, yes, yes, they're all right. Perhaps you may not think that this little input can create 10 different things, here is a list, see what you did not expect:
<input type= "text"/> text box
<input type= " Password "/> Password box
<input type=" submit "/> Submit button
<input type=" reset "/> reset button
<input type=" Radio /> Radio Box
<input type= checkbox/> check box
<input type= "button"/> Normal button
<input type= "file"/> File Selection control
<input type= "hidden"/> Hidden box
<input type= "image"/> Picture button
So you might say that input is really a great thing to have "dead end" , but when you really try to set different styles for different controls in your project, you'll find that input really makes "your head big." I don't know why I had to give input so many identities, but his "N-heavy identity" did bring a lot of trouble to web designers. Fortunately, the working people are great, the solution to the problem is still dripping ~, although they all have their own fatal shortcomings Orz ... The liberation method is roughly summed up, the list is as follows (the younger brother is sparse, error omission unavoidably, also please the expert pointing):
1. Use the expression of the CSS to determine
2. Use the type selector in CSS
3. Using JavaScript scripts to implement
4. If you are developing projects with Microsoft Visual Studio 2005 or later, congratulations, you can also use skins.
The detailed implementation of each approach and their pros and cons are explained below.
1: Using the expression-judging expressions of CSS
Implementation Code reference:
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
<HTMLxmlns= "http://www.w3.org/1999/xhtml" >
<Head>
<title>DiffInput2</title>
<Metaname= "Author"content= "Justinyoung"/>
<Metaname= "Keywords"content=""/>
<Metaname= "Description"content=""/>
<Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>
<styletype= "Text/css">
Input
{
Background-color:expression (this.type== "text"? ') #FFC ': ');
}
</style>
</Head>
<Body>
<DL>
<DT>This is normal textbox:<DD><inputtype= "text"name="">
<DT>This is normal button:<DD><inputtype= "button"value= "I ' m button">
</DL>
</Body>
</HTML>
Pros: Simple, lightweight
Cons: expression is not supported for expressions to judge Firefox. The fatal is only to distinguish one (for example, can only distinguish the text box), do not try to set multiple, the following will overwrite the above Orz ...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
