1、只有下划线的文本框:
<input style="border:0;border-bottom:1 solid black;">
2、软件序列号式的输入框:
<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">
3、输入框景背景透明:
<input style="background:transparent;border:1px solid #ffffff">
4、鼠标划过输入框,输入框背景色变色:
<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">
5、输入字时输入框边框闪烁(边框为小方型):
<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);">
6、输入字时输入框边框闪烁(边框为虚线):
<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">
7、自动横向廷伸的输入框:
<input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="爱智旮旯">
8、自动向下廷伸的文本框:
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试一试</textarea>
相关推荐
CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,...
时间类的选择器,均可设置输入框的显示样式和值的形式,属性分别为format、value-format 单选框和复选框,选中项属性的label值就是model的值 复选框,如果是多选的话,务必设置model值是数组 文本框类 这里我...
最近和另外一位同事负责公司登录和用户中心模块的开发...比如上面的的注册和登录模块,就有相同的返回按钮,相同的背景,相同的导航栏样式,甚至相同的按钮和输入框样式。所以为了加快我们的开发,我们完全先定义一个父
路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记。 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直...
7.4.1标准输入框 7.4.2标准颜色对话框 7.4.3标准字体对话框 7.4.4标准消息对话框 7.4.5标准对话框的使用实例 7.5模态对话框与非模态对话框 7.6问题与解答 7.7总结与提高 第8章主窗口 8.1主窗口框架 8.2创建主窗口的...
云应用开发 Google App Engine & Google Web Toolkit入门指南 侯炯 目录 第1章 应该了解下 1.1云基本知识 1.2Google App engine 1.3Google Web Toolkit 第2章 环境搭建 ...4.9 联想输入框——Suggest Box... 10.3.16总结
这段时间在做一个短信项目,需要实现短信中插入表情的功能,本一位非常困难,经过一段时间的研究,发现还是比较簡単的,现在总结如下。 以短信输入框为例,短信的输入框是一个EditText,它的append方法不仅可以...
因为项目需要有个小功能,控制小眼睛睁眼闭眼实现密码的可读还是隐藏。亲身使用总结,有问题可以随时联系我。
前言:前端时间也是应项目的需求开始了h5移动端的折腾之旅,在目前中台的基础上扩展了两个ToC移动端项目,下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。 问题 在 h5 项目中,我们会经常遇到一些表单...
前言:由于表单的元素比较多,因此将Bootstrap的表单单独做个总结,表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括...