The behavior--htc in CSS

Css|htc

Recently, I was interested in the behavior of these CSS, I looked at some documents to make a form mouse slide over the effect. Of course HTC uses, everyone likes to make a number of homemade build, custom tags.

Quote
Description
HTC is an acronym for HTML component,
is one of the major extensions of IE5.0,
In addition to the reusable benefits of general components,
Also has the advantages of easy to develop and use,
Because of the need to introduce external files, here is no example, there are examples in the Treasury.

Controls and components
HTC provides a simple mechanism for implementing DHTML behavior in scripts. There is no difference between an HTC file and an HTML file, and the suffix ". HTC" .

On the demo, I saw some forms of the input box, there is a mouse over the effect, or background color or border discoloration. Use: hover is easy to implement, unfortunately Ms IE7 previous browsers can not support, then alone to ie5.+ use HTC to define mouse behavior. In fact, this practical JS implementation is also very easy, I would like to take the HTC practice practicing. first look at the effect ?

Here is the code

The XHTML structure comes from the prettier Accessible Formsof Ala. Here to say a little more, we suggest that when you make a form later use the following structure, strict XHTML recommendation <form> can not directly place the form elements. It is also reasonable to organize multiple forms with <ol>.

<fieldset>
<legend>delivery details</legend>
<ol>
<li>
<label for= "Name" >Name<em>*</em></label>
<input id= "Name"/>
</li>
<li>
<label for= "Address1" >Address<em>*</em></label>
<input id= "Address1"/>
</li>
<li>
<label for= "Address2" >address 2</label>
<input id= "Address2"/>
</li>
<li>
<label for= "Town-city" >Town/City</label>
<input id= "Town-city"/>
</li>
<li>
<label for= "County" >County<em>*</em></label>
<input id= "County"/>
</li>
<li>
<label for= "Postcode" >Postcode<em>*</em></label>
<input id= "postcode"/>
</li>
<li>
<fieldset>
<legend>is This address also your invoice»
Address?<em>*</em></legend>
<label><input type= "Radio"»
Name= "Invoice-address"/> yes</label>
<label><input type= "Radio"»
Name= "Invoice-address"/> no</label>
</fieldset>
</li>
</ol>
</fieldset>

HTC:input.htc

<PUBLIC:COMPONENT>
<public:attach event= "onmouseover" onevent= "Hilite ()"/>
<public:attach event= "onmouseout" onevent= "Restore ()"/>
<script language= "JScript" >
<!--
function Hilite ()
{
Save original values
Element.style.border = "1px #f60 solid";
Element.style.background = "#f5f5f5";
}

function Restore ()
{
Restore Original values
Element.style.border = "1px #ccc solid";
Element.style.background = "#fff";
}
-->
</SCRIPT>
</PUBLIC:COMPONENT>

Css

<style type= "Text/css" >
<!--
*{color: #666; font-size:11px;font-family:arial, Helvetica, Sans-serif;}
Body{text-align:center;}
fieldset{border:1px #eee solid; width:310px; margin:0 auto; padding:8px; text-align:left;}
legend{padding:4px;}
FieldSet label{float:left; width:70px; text-align:right;padding:0 10px;}
FieldSet ol{list-style:none; margin:0; padding:0;}
FieldSet ol li{clear:both; line-height:20px;}
FieldSet ol Li fieldset{width:280px;}
Input{behavior:url (INPUT.HTC); border:1px #ccc solid; background: #fff; width:160px;} /*only for IE 5.0+*/
Label input{width:14px;height:14px;border:0}/*for input type is radio*/
input:hover{border:1px #f60 solid;background: #f5f5f5;} /*for Orther browsers*/
Em{color: #ff0000;}
-->
</style>