`

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

分享到:
评论

相关推荐

    纯CSS3实现漂亮的input输入框动画样式库(Text input love)

    分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...

    输入框input样式,各种效果齐全

    本资源"输入框input样式,各种效果齐全"提供了一系列输入框样式的实例,旨在帮助开发者创建更加丰富多样的用户界面。 首先,我们要理解HTML中的`&lt;input&gt;`标签,它是创建输入框的基础。`&lt;input&gt;`标签是HTML的表单...

    点击input输入框弹出选择层(基于jquery)

    在网页设计和开发中,有时候我们需要为用户提供更加交互式的体验,比如当用户点击一个input输入框时,弹出一个选择层来供用户选择。这样的功能通常用于下拉菜单、日期选择器或者选项列表等场景。在这个案例中,我们...

    input输入框按照字母顺序筛选城市

    当input输入框获取焦点后,自动下拉显示按照字母字段排序的筛选框 城市名称的排序、内容均在js中可以任意修改 使用方法: 1、在网页head中引入页面css样式 2、将“代码”部分拷贝到你需要的地方 ...

    日期控件(input输入框)

    在网页开发中,日期控件(input输入框)是一种常见的用户界面元素,允许用户方便地选择日期,常用于表单填写、日程安排等场景。在本案例中,这个日期控件是通过JavaScript和CSS实现的,并且依赖于jQuery库。jQuery是一...

    F:\Soft\input输入框美化效果.zip

    标题中的"F:\Soft\input输入框美化效果.zip"是一个压缩包文件,位于F盘的Soft文件夹下,其内容是关于input输入框的美化效果。描述提到“14种CSS3炫酷表单input输入框美化效果”,这表明这个压缩包内包含了一系列使用...

    CSS3 input输入框蓝光特效.zip

    在传统的CSS中,我们可以通过设置边框、背景色等属性来改变input输入框的样式。然而,CSS3的transition属性则提供了平滑的过渡效果,使得元素的样式在不同状态间切换时能够有渐变的动画效果。 在“CSS3 input输入框...

    input输入框蓝光特效

    总的来说,实现"input输入框蓝光特效"涉及了前端开发中的CSS样式设计和JavaScript事件处理。通过结合这两者,我们可以创建出吸引用户的交互效果,提升网页的用户体验。同时,根据项目需求,我们还可以进行更高级的...

    基于vue2.0的input输入框文字特效

    【标题】"基于vue2.0的input输入框文字特效"是关于在Vue.js 2.0框架下创建一个具有动态视觉效果的输入框组件。Vue.js是一个流行的前端JavaScript框架,用于构建用户界面,它强调数据驱动和组件化。在这个项目中,...

    14种CSS3炫酷表单input输入框美化效果

    本资源“14种CSS3炫酷表单input输入框美化效果”正是围绕这一主题展开,旨在帮助开发者创造出更具吸引力和交互性的表单界面。 1. **边框动画效果**:通过CSS3的`border-radius`属性,可以创建圆角输入框,增强视觉...

    好看的input输入框-合集-各种悬停、选中特效样式-HTML源码

    标题为“好看的input输入框-合集-各种悬停、选中特效样式-HTML源码”的资源正致力于解决这一问题,提供了一系列精美的HTML输入框样式,以提升网页的美观度和用户交互体验。 HTML(HyperText Markup Language)是...

    input输入框蓝光特效源码

    这是一款基于CSS3实现的input输入框蓝光特效源码,是一款CSS3 transition过渡制作发蓝光的input输入框样式代码。当输入框获得焦点时可呈现出发光的特效。是一款非常优秀的特效源码。建议用户使用支持CSS3的火狐或...

    jQuery/JS监听input输入框值变化实例

    同时,使用jQuery绑定了oninputpropertychange事件,显示了在输入过程中实时获取输入框长度,并根据输入值是否存在来改变其他元素的样式。 在介绍完各种监听方法后,文章还提供了一些兼容IE浏览器的JavaScript函数...

    带图标的input输入框

    在网页设计中,"带图标的input输入框"是一个常见的交互元素,它通过结合图标与文本输入框,提升用户界面的美观度和易用性。这样的设计可以使用户更直观地理解输入框的目的,例如,一个搜索图标常用于搜索框,锁型...

    input输入框删除文字效果js代码

    为了提供更好的用户体验,许多网站会添加一些交互特效,例如本例中的"input输入框删除文字效果js代码"。这个特效使得用户在输入框中输入文字后,可以通过点击一个可操作的图标或按钮来轻松清除已输入的内容,类似...

    微信小程序--组件input输入框控件的使用示例源码

    微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的,比较常见的地方,如:登录、注册、搜索等。 另外输入框在不同的场景下,也会有不同的样式。 这里给大家示范一下各种场景下的实例效果...

    控制input输入框中提示信息的显示和隐藏的方法

    4. **CSS增强**:为了提高用户体验,还可以使用CSS来改变input输入框的样式,如在鼠标悬停时改变背景色,以提示用户可交互。例如: ```css .search input { star : expression(onmouseover=function(){ this....

    制作符合用户体验的漂亮的input输入框

    在本文中,我们使用了四种不同的CSS样式来控制input输入框的样式。它们分别是 `.input_on`、`.input_off`、`.input_move` 和 `.input_out`。这些样式可以控制input输入框的背景颜色、边框颜色、padding等属性。 在...

    jquery输入框提示插件input输入框文字下拉提示添加标签代码

    标题和描述提到的“jquery输入框提示插件input输入框文字下拉提示添加标签代码”是一个关于如何利用 jQuery 和相关技术实现这种功能的方法。 这个插件的主要目的是当用户在输入框中输入文字时,提供实时的下拉提示...

Global site tag (gtag.js) - Google Analytics