日期:2014-05-17  浏览次数:20607 次

css样式归纳(一)——之常见特效

?

1、只有下划线的文本框:

<input style="border:0;border-bottom:1 solid black;background:;">

?

2、软件序列号式的输入框:

<script for="T" event="onkeyup">

if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();

</script>

<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">

?

3、软件序列号式的输入框(完整版):

<script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>

<script for="T" event="onfocus">select();</script>

<script for="Submit" event="onclick">

var sn=new Array();

for(i=0;i<T.length;i++)

sn=T.value;

alert(sn.join("—"));

</script>

<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">

<input type="submit" name="Submit">

?

4、输入框景背景透明:

<input style="background:transparent;border:1px solid #ffffff">

?

5、鼠标划过输入框,输入框背景色变色:

<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">

?