input输入框的各种样式 文本框为下划线 text输入框样式
来源:互联网 发布:js attr方法 编辑:程序博客网 时间:2024/05/29 18:30
http://blog.sina.com.cn/s/blog_6e212cad0100mi11.html
输入框景背景透明:
<input style="background:transparent;border:1px solid #ffffff">
鼠标划过输入框,输入框背景色变色:
<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">
输入字时输入框边框闪烁(边框为小方型):
<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);">
输入字时输入框边框闪烁(边框为虚线):
<style>#oText{border:1px dotted #ff0000;ryo:e xpression(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">
自动横向廷伸的输入框:
<input type="text" style="huerreson:e xpression(this.width=this.scrollWidth)" value="abcdefghijk">
自动向下廷伸的文本框:
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>
只有下划线的文本框:
.input{border:none #FFFFFF;border-bottom:#777777 solid 1px;background:transparent;}
软件序列号式的输入框:
<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">
软件序列号式的输入框(完整版):
<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">
0 0
- input输入框的各种样式 文本框为下划线 text输入框样式
- 文本框input输入框的各种样式
- input输入框的各种样式
- input输入框的各种样式
- Input输入框的各种样式
- 下划线样式的输入框
- input输入框样式
- text输入框样式
- 文本框输入的样式
- input输入框的多种样式
- 修改input输入框的样式
- input 输入框样式特效
- 设置input type为text的文本框样式
- input 输入框下划线
- input输入框聚焦状态样式
- 自制样式美观的input组件(以search输入框为例,含源码)
- bootstrap 中 input输入框与其他样式的组合
- input输入框修改placeholder和readonly的样式
- 观察者设计模式
- c++primer第五版第十六章练习
- UI控件RecyclerView浅析
- android opengles 最简单的三角形的方法
- hibernate映射(一)——M到底是如何发生的?
- input输入框的各种样式 文本框为下划线 text输入框样式
- jquery 多form 提交
- 【论文笔记】SparkNET: 用Spark训练深度神经网络
- Android 讲解:存储 (1)
- 二叉树定义--有序树
- UIWebView的一些用法总结
- cvpr相关文章01
- Python数据类型-字典
- SVN服务器的本地搭建和使用