`
wsql
  • 浏览: 11805513 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

几个简单的HTML文本框样式

 
阅读更多

输入框景背景透明:
<input style="background:transparent;border:1pxsolid #ffffff">

<wbr></wbr>

鼠标划过输入框,输入框背景色变色:
<INPUTvalue="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">

<wbr></wbr>

输入字时输入框边框闪烁(边框为小方型):
<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:5pxdotted red;color:red" onfocus="borderColor(this);"onblur="clearTimeout(oTime);">

<wbr></wbr>

输入字时输入框边框闪烁(边框为虚线):
<style>
#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=functionlight(){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">

<wbr></wbr>

自动横向廷伸的输入框:
<input type="text"style="huerreson:expression_r(this.width=this.scrollWidth)"value="abcdefghijk">

<wbr></wbr>

自动向下廷伸的文本框:
<textarea name="content" rows="6" cols="80"onpropertychange="if(this.scrollHeight>80)this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

<wbr></wbr>

只有下划线的文本框:
<input style="border:0;border-bottom:1 solidblack;background:;">

<wbr></wbr>

软件序列号式的输入框:
<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">—<inputname="T" size="5"maxlength="3">—<input name="T"size="5" maxlength="3">—<inputname="T" size="5"maxlength="3">—<input name="T7"size="5" maxlength="3">

<wbr></wbr>

软件序列号式的输入框(完整版):
<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">—<inputname="T" size="5"maxlength="3">—<input name="T"size="5" maxlength="3">—<inputname="T" size="5"maxlength="3">—<input name="T"size="5" maxlength="3">
<input type="submit"name="Submit">


分享到:
评论

相关推荐

    Quill编辑器插入自定义HTML记录的示例详解

    转眼已经2020年,饥渴的人类不再满足于简单的文本,于是有了花里胡哨的携带各种样式的文本,然而有文本还不够,我们还需要让用户在编辑的时候,能够插入各种自定义消息类型,让我们发出去的软文更加好看,因此有了这...

    MicrosoftHTMLHelpWorkshopV1.3汉化版.rar

    其页面跳转必须借助 HTML 内部的超级链接和功能按钮,对于比较简单的几个 HTML 文件也已经足够了。如果 HTML 比较复杂,也可以使用分帧处理,同样会作出很不错的 chm 文件,就像我们进入一些有分帧页面的网站时的...

    前端css+html+布局笔记

    可以使用../返回一级目录,返回几级使用几个../ xHtml语法规范 1.HTML中不区分大小写,但是尽量使用小写 2.HTML的注释不能嵌套 3.标签必须结构完整 要么成对出现 要么自结束标签 4.标签可以嵌套但是不能...

    html入门到放弃笔记

    2、为网页指定标题 - 我的第一个HTML文档 3、指定网页的字符编码格式为 utf-8 4、在 body 中 输出一句话 "我的第一HTML页面" 5、设置 body text为red,bgcolor为yellow 3、文本 1、特殊文本的实现 页面的空格...

    Asp.net操作Excel的一个类库ExcelHelper

    这个类库没有提供Excel样式设置的方法,建议... 3、Excel组件访问权限的配置问题,见我以前写的随笔关于在ASP.NET中以DCOM方式操作Excel的几个问题 http://www.cnblogs.com/lingyun_k/archive/2005/08/01/205097.html

    400个DreamWeaver插件

    mxp/在file菜单下增加一个新的命令,可以列出最近编辑的几个文件。就好象Windows开始菜单中的“文档” mxp/现在的插件真是不得了!我恨不的给每个插件都打上5分。这个插件可以做一段Flash动画,用来演示目标文件夹下...

    O-Blog V2.6 Build 0430

    增加了几个静态文件的扩展名 编辑时可以选择是否再次发送 trackback 增加草稿功能 发表评论/留言可以设定间隔时间 可以设定是否隐藏连接 增加后台首页的快捷方式 增加后台登陆验证码,并可以开启/关闭 可以给...

    AngularJS实现进度条功能示例

    ② 进度条的进度通过文本框里面的值改变(也可以快捷的选择几个特定的值) ③ 通过checkbox按钮,控制进度条上的文字是否显示 二、代码实现: &lt;!DOCTYPE html&gt; &lt;html lang="en" ng-app='app'&gt; &lt;head&gt...

    zepto-autocomplete:ZeptoJS的自动完成插件

    Zepto Autocomplete插件是一个微型js库(几KB),通过添加一个类并在页面加载时初始化插件,ZeptoJS用户可以轻松地在其文本框中插入“ autocomplete”功能。 自动完成的数据源可以是本地javascript Array对象,也...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 ...

    JSP企富商贸网开发

    的选中某几个产品,可以直接钩选第一列复选框,对于被钩选中的产品,可以使是 一次性删除操作,点击“删除”按钮即可。 点击“操 作”列的“删除”,仅仅可以删除本行记录, 点击“操 作”列的“编辑”,可以对该产品...

    程序天下:JavaScript实例自学手册

    3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 ...

    JAVA上百实例源码以及开源项目源代码

    8个目标文件 简单 JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 Java编写的HTML浏览器源代码,一个很简单甚至不算是...

    jQuery完全实例.rar

    这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最...

    JAVA上百实例源码以及开源项目

     Java编写的HTML浏览器源代码,一个很简单甚至不算是浏览器的HTML浏览器,使用方法:  可直接输入文件名或网络地址,但必需事先连入网络。 Java编写的山寨QQ,多人聊天+用户在线 21个目标文件 摘要:JAVA源码,...

    GExperts 1.32 For Delphi 7

    大家都知道,Delphi语言的功能是相当强大的,由于...这个功能可以为不同的项目设置几组不同的值,你可以根据自己的需要将几组设置分别存盘,在需要的时候调入。为了方便用户,每一个具体的值都有简短的提示说明其含义。

    css入门笔记

    独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...

    文章管理系统

    6.修复几个细节BUG 2014年04月30日 V2.84更新包(推荐升级) 1.修复安装向导配置时对数据库字符过滤不严存在入侵漏洞 2.修复后台模板样式文件字符过滤不严存在入侵漏洞 3.修复后台登录验证没有清空验证码信息,...

    IBM WebSphere Portal门户开发笔记01

    五、WCM几个页面路径及其名称 44 1、登录页面 44 2、主题及主页页面 45 3、皮肤外观页面路径 45 4、session超时页面 45 5、登录portal时,绕过登录界面,直接进入到主页(或再登录) 45 6、自定义登录跳转页面 45 7...

Global site tag (gtag.js) - Google Analytics