What do you think of when you see a <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 small input can create 10 different things, the following is a list, to see what you do 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, but when you actually try to set different styles for different controls in your project, you will find that input really can make your head bigger and larger. I do not know why the original to give input so many identities, but his "N-Identity" to the Web site designers did bring a lot of trouble. Fortunately, the working people are great, the solution to the problem or there are drops ~, although they have their own fatal shortcomings Orz ... The method of emancipation is summed up, the list is as follows (the younger brother is sparse, the mistake is unavoidable, also please the high expert to instruct):
1. Using CSS to judge the expression of expression
2. Using the type selector in CSS
3. Use JavaScript script to implement
4. If you are developing a project with Microsoft Visual Studio 2005 or later, congratulations, you can also use skin.
Here's a look at the detailed implementation of each approach and their pros and cons.
1: Using CSS expression to judge the expression
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
"" ""
dt this is normal textbox: , DD >< input Type = "text" name = "" "
DT This is normal button: dd >< input Type = "button" value = "I ' M button"
</ dl >
</ " "
</ html
Advantages: Simple, lightweight
Disadvantages: expression to determine the expression of Firefox is not supported. Fatal is can only distinguish one (for example, can only distinguish the text box), do not try to set multiple, the following will be the top of the cover off Orz ...
Current 1/4 page
1234 Next read the full text
