`

输入框样式总结

    博客分类:
  • CSS
 
阅读更多

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>

分享到:
评论

相关推荐

    HTML5&CSS3网页制作:CSS控制表单样式.pptx

    CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,...

    【JavaScript源代码】element的表单元素使用总结.docx

    时间类的选择器,均可设置输入框的显示样式和值的形式,属性分别为format、value-format 单选框和复选框,选中项属性的label值就是model的值 复选框,如果是多选的话,务必设置model值是数组  文本框类 这里我...

    IOS开发用户登录注册模块所遇到的问题

    最近和另外一位同事负责公司登录和用户中心模块的开发...比如上面的的注册和登录模块,就有相同的返回按钮,相同的背景,相同的导航栏样式,甚至相同的按钮和输入框样式。所以为了加快我们的开发,我们完全先定义一个父

    jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记。 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直...

    Qt4编程.pdf

    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入门指南

    云应用开发 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总结

    Android的TextView使用Html来处理图片显示、字体样式、超链接等

    这段时间在做一个短信项目,需要实现短信中插入表情的功能,本一位非常困难,经过一段时间的研究,发现还是比较簡単的,现在总结如下。 以短信输入框为例,短信的输入框是一个EditText,它的append方法不仅可以...

    react 通过小眼睛 控制密码显示与隐藏

    因为项目需要有个小功能,控制小眼睛睁眼闭眼实现密码的可读还是隐藏。亲身使用总结,有问题可以随时联系我。

    html5手机键盘弹出收起的处理

    前言:前端时间也是应项目的需求开始了h5移动端的折腾之旅,在目前中台的基础上扩展了两个ToC移动端项目,下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。 问题 在 h5 项目中,我们会经常遇到一些表单...

    完全深入学习Bootstrap表单

    前言:由于表单的元素比较多,因此将Bootstrap的表单单独做个总结,表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括...

Global site tag (gtag.js) - Google Analytics