input输入框的各种样式
输入框景背景透明:
<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输入框的各种样式的更多相关文章
- input输入框外联式样式控制不了字体
1.问题背景 在做项目过程中,发现input输入框利用外联样式,控制不了输入框的样式 2.问题原因 (1)HTML代码 <!DOCTYPE html> <html> <h ...
- 手机端实现6位短信验证码input输入框效果(样式及代码方法)
微信移动端4位.6位.多位验证码密码输入框功能的实现代码,实现思路: 方案1: 写一个简单的input框. 评估:样式不好看,待定. 方案2: 就是用6个input框,每输入一个数字之后,切换到下一个 ...
- 修改input输入框的样式
直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: none; font-size:1.4em; height ...
- css样式之input输入框默认样式
帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...
- (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
- MVC4怎么设置@Html.TextBoxFor这样的输入框的css样式
在传统webForm中,输入框的这样的: <input id="userName" name="userName" type="text&quo ...
- 认识input输入框的placeholder属性
我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型 ...
- CSS设置input placeholder文本的样式
placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...
- input输入框和 pure框架中的 box-sizing 值问题
在使用pureCSS框架的时候,遇到一个问题. input输入框,我给他们设置了宽度和padding值,我发现,在火狐和谷歌上面发现,增加padding值并不会影响最终的宽度,而在IE6 7下则会影响 ...
随机推荐
- Flex RPC错误整理 转
http://wenku.baidu.com/link?url=l2T80q4OXOIvUEmVn97XL-By9_GClgHMDmY5fuu-XSmQDqH56_AUa19pjbdA_SlwhFnu ...
- Wince 文本函数和字体应用
好像又进入了一个疲惫期了,晚上状态不好,但是还是想继续更新下博客,继上次分析了wince下设备环境以及怎么绘制相关图像后,,笔者在这片文章中讲到文本函数以及其相关应用.文本输出函数是输出文本的内容,也 ...
- Java反转单链表(code)
主要是面试中可能会经常碰上该类似操作,尤其是稍大点公司,面试官可能并不在乎你能不能搞定该题,但是这类型题目最是能体现程序员的思维状态 ---一个迷糊头脑的程序员 怎能立志改变这个世界 /** * @a ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- CSS/块级元素与内联元素的深入理解
今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为:
- Java Concurrency - wait & notify, 等待通知机制
生产者消费者问题是一个常见的多线程同步案例:一组生产者线程和一组消费者线程共享一个初始状态为空.大小为 N 的缓冲区.只有当缓冲区没满的时候,生产者才能把消息放入缓冲区,否则必须等待:只有缓冲区不空的 ...
- 【AngularJs】---表单验证
1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...
- TSQL基础(一) - 查询
select 1.查询一张表(orders)的所以纪录 select * from Orders 2.查询一张表(orders)某字段的所有记录 select OrderID,OrderDate fr ...
- 将svn添加到系统服务
C:\Users\Administrator>sc create svnServer binPath= "D:\Program Files\Subversion\bin\svnserv ...
- 在SQL 2012中使用和Oracle 一样的序列
使用过Oracle的都知道,Oracle中的自增是靠序列来完成的,在一定程度上蛮方便的.现在SQL 2012中也有序列了.来看看怎么做的吧! SQL Server 现在将序列当成一个对象来实现,创建一 ...