表單控件的樣式實用例子

 在很多文件和有很多的文本框的時候,我想在style.css文件中寫上修飾文本框的樣式,那麼就能只要在每個文件中有:  
  <style   type="text/css">  
  <!--  
  @import   url("css/style.css");  
  -->  
  </style>   
  這樣這個文件中的所有文本框都能統一的得到修飾

 

CSS中寫:  
  INPUT  
  {  
  behavior:url('Input.htc');          
  }  
  Input.htc中內容://如果有特殊用途的INPUT存在可以判斷className  
  <script   language=javascript>  
  switch(type)  
  {  
  case   'text':  
  style.border="1px   solid   #000000";  
  style.backgroundColor="#FFFFFF";  
  style.height="15px";  
  style.font="normal   9pt   宋體";  
  style.color="#000000";  
  break;  
  case   'password':  
  style.border="1px   solid   #000000";  
  style.backgroundColor="#DEE3BD";  
  style.height="15px";  
  style.font="normal   9pt   宋體";  
  style.color="#000000";  
  break;  
  case   'submit':  
  style.border="1px   solid   #000000";  
  style.backgroundColor="#DEE3BD";  
  style.height="15px";  
  style.font="normal   9pt   宋體";  
  style.color="#FF0000";  
  break;  
  case   'reset':  
  style.border="1px   solid   #000000";  
  style.backgroundColor="#DEE3BD";  
  style.height="15px";  
  style.font="normal   9pt   宋體";  
  style.color="#000000";  
  break;  
  case   'button':  
  style.border="1px   solid   #000000";  
  style.backgroundColor="#DEE3BD";  
  style.height="15px";  
  style.font="normal   9pt   宋體";  
  style.color="#000000";  
  break;  
  case   'file':  
  style.border="1px   solid   #000000";  
  style.backgroundColor="#FFFFFF";  
  style.height="15px";  
  style.font="normal   9pt   宋體";  
  style.color="#000000";  
  break;  
  default:  
  style.border="1px   solid   #000000";  
  style.backgroundColor="#DEE3BD";  
  style.height="15px";  
  style.font="normal   9pt   宋體";  
  style.color="#000000";  
  break;  
  };  
  οnmοusedοwn=function()  
  {  
  style.color="#0000FF";  
  };  
  οnmοuseοver=function()  
  {  
  style.color="#0000FF";  
  };  
  οnmοuseοut=function()  
  {  
  if(type=="submit")  
  {style.color="#FF0000";}  
  else  
  {style.color="#000000";}  
  };  
  </script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章