input输入框的各种样式

时间:2022-09-22 00:48:04

输入框景背景透明:

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

自动横向廷伸的输入框:

 <input type="text" style="huerreson:expression(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 style="border:0;border-bottom:1 solid black;background:;">

软件序列号式的输入框:

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

input输入框的各种样式的更多相关文章

  1. input输入框外联式样式控制不了字体

    1.问题背景 在做项目过程中,发现input输入框利用外联样式,控制不了输入框的样式 2.问题原因 (1)HTML代码 <!DOCTYPE html> <html> <h ...

  2. 手机端实现6位短信验证码input输入框效果(样式及代码方法)

    微信移动端4位.6位.多位验证码密码输入框功能的实现代码,实现思路: 方案1: 写一个简单的input框. 评估:样式不好看,待定. 方案2: 就是用6个input框,每输入一个数字之后,切换到下一个 ...

  3. 修改input输入框的样式

    直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: none; font-size:1.4em; height ...

  4. css样式之input输入框默认样式

    帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...

  5. (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline&colon;medium&semi;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  6. MVC4怎么设置&commat;Html&period;TextBoxFor这样的输入框的css样式

    在传统webForm中,输入框的这样的: <input id="userName" name="userName" type="text&quo ...

  7. 认识input输入框的placeholder属性

    我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型 ...

  8. CSS设置input placeholder文本的样式

    placeholder是HTML5  input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...

  9. input输入框和 pure框架中的 box-sizing 值问题

    在使用pureCSS框架的时候,遇到一个问题. input输入框,我给他们设置了宽度和padding值,我发现,在火狐和谷歌上面发现,增加padding值并不会影响最终的宽度,而在IE6 7下则会影响 ...

随机推荐

  1. *卫星接收器&colon;为你提供免费上网服务

    包括笔者在内,许多现代人的日常生活都无法离开网络,因为在网络上我们几乎可以找到任何我们需要的信息.但你是否有想过在户外无网络信号的情况下如何接收网络数据呢?一个名为Outernet Inc.的公司为我 ...

  2. ImageList半透明,Alpha通道bug处理。

    由于ImageList的先天障碍,对alpha通道支持不好.虽然到xp有所改善,但瑕疵依然存在. 通过reflactor发现ImageList通过windows api来进行读写的.写入数据时会对原始 ...

  3. 如何让虚拟目录里面的webconfig不继承网站的设置

    在一个网站 中国红木网 下 建一个虚拟目录,结果虚拟目录系统会调用 中国红木网 上的web.config, 在网上找到以下解决方案 在(如根目录)所在的Web.config加上 如:<locat ...

  4. nginx源代码分析--event事件驱动初始化

    1.在nginx.c中设置每一个核心模块的index ngx_max_module = 0; for (i = 0; ngx_modules[i]; i++) { ngx_modules[i]-&gt ...

  5. OpenVPN-ng,为移动续航的应用层隧道

    VPN,让人觉得它总是做好事的,是逃离监管的途径,其实VPN已经成了逃离监管的唯一代名词.你看,无论是什么技术,IPSec也好,WEB代理也罢,仅仅要是加密了原始信息的技术,都能够叫做VPN,于是乎就 ...

  6. FZU 1894 志愿者选拔(优化循环)

    我并没有多想,他们是用的数组模拟队列,然而我就是优化循环次数过得 #include<iostream> #include<cstdio> #include<cstring ...

  7. &period;Net 内存池

    最近在开发 Pinpoint .Net 客户端,和服务端通信都是通过 TCP 或者 UDP,需要处理大量的 Byte 数据,使用 .Net Framework 只能通过 new Byte[] 的方式申 ...

  8. 企业级监控zabbix基础

    一个标准的监控系统所具备的基本功能: 1.数据的采集 2.为了展示其长期走势,将数据存储下来 3.万一某次采样的结果不在被认为是合理的范围内,然后就会做出告警操作,尽早的让相关人员得知到此消息 4.展 ...

  9. Python3入门机器学习经典算法与应用

    <Python3入门机器学习经典算法与应用> 章节第1章 欢迎来到 Python3 玩转机器学习1-1 什么是机器学习1-2 课程涵盖的内容和理念1-3 课程所使用的主要技术栈第2章 机器 ...

  10. 3&period;8Python数据处理篇之Numpy系列&lpar;八&rpar;---Numpy的梯度函数

    目录 目录 前言 (一)函数说明 (二)一维数组的应用 (三)多维数组的应用 目录 前言 梯度函数,其中的梯度也就是斜率,反映的是各个数据的变化率.在numpy中只有一个梯度函数. (一)函数说明 ( ...