Use HTC to customize a unified form style

When creating a form, we often use CSS to redefine the style of form elements (such as input boxes and buttons) to make it look more beautiful. Many different elements in the form (such as the Input box, submit button, and single sheet) use a tag -- Input, which means that, in CSS, we cannot define only the Input tag to define the styles separately. Generally, several classes are defined. When writing a form, different elements use different classes. However, when there are many forms, this is still not very convenient. Is there any way to save effort? The answer is yes. A simple HTC can solve this problem.

Example: htc code: <script language = javascript>
Switch (type)
{
Case ''text '':
Case ''password'': // text input box and password input box style
Style. border = "1px solid #000000 ";
Style. backgroundColor = "# FFFFFF ";
Style. height = "18px ";
Style. font = "normal 12px ";
Style. color = "#000000 ";
Break;

Case ''submit '':
Case ''reset '':
Case ''button '': // the style of the button class (excluding the image button)
Style. border = "1px solid #000000 ";
Style. backgroundColor = "# CCCCCC ";
Style. height = "18px ";
Style. font = "normal 12px ";
Style. color = "#000000 ";
Break;

Default:; // we use the default style for elements that have not been shown in a single-choice box.
}
</Script> save the preceding code as an HTC file, for example, input. htc. A brief analysis of the code: in fact, this is just a piece of JS. It determines the style to use by judging the type (the Input uses the type attribute to determine which form field is used, and pay attention to the use of the switch statement here. Is it easy? After the HTC file is written, we will use the CSS behavior (behavior) to call this HTC file. The CSS statement called is as follows: input {behavior: url (''input. htc '')}/* input. htc and the webpage are in the same directory */We can see that now we define the style of the entire Input tag, and what form elements use what style, it is determined and defined by JS in the HTC file. How can we see the charm of HTC through such a simple example?