指定類別的input使用樣式(1)

<style type="text/css">
<!--
table {
border: 1px solid #CCC;
border-collapse:collapse;

}
table td {
font:12px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

padding-top: 4px;
padding-right: 6px;
padding-bottom: 4px;
padding-left: 6px;
}
input[type=text],input[text=button],input[type=password],
input[type=submit],input[type=reset],textarea,select{
border:1px #36F solid;
background-color:#FFF
}
-->
</style>
 

1. Input樣式

   1.1. 輸入框景背景透明? <input style="background:transparent;border:1px solid #ffffff"> 

  2. 鼠標劃過輸入框?輸入框背景色變色? <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"  style="width: 106; height: 21"  onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">

3. 輸入字時輸入框邊框閃爍(邊框爲小方型)? <Script Language="JavaScript"> function borderColor(){ if(self['oText'].style.borderColor=='red'){ self['oText'].style.borderColor = 'yellow'; }else{ self['oText'].style.borderColor = 'red'; } oTime = setTimeout('borderColor()',400); } </Script> <input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">

4. 輸入字時輸入框邊框閃爍(邊框爲虛線)? <style> #oText{border:1px dotted #ff0000;ryo:expression(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})}; </style> <input type="text" id="oText">

 

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