`

输入框样式总结

    博客分类:
  • 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文件上传输入框样式代码.zip

    总结来说,HTML5文件上传输入框样式代码的实现涉及到HTML的`&lt;input type="file"&gt;`标签、CSS的样式设计以及JavaScript的事件监听和文件操作。通过这些技术,我们可以创建出符合网站整体风格、功能强大的文件上传组件...

    密码输入框demo

    总结,HTML5的密码输入框提供了丰富的特性和功能,结合JavaScript和CSS,我们可以创建出具有显示/隐藏切换、自定义样式、安全验证等特性的密码输入框。通过不断优化和增强用户体验,我们可以创建出更加安全、易用的...

    自定义牛逼的EditText特效输入框

    总结来说,自定义牛逼的EditText特效输入框是一个优秀的Android开发资源,它为开发者提供了创新的UI设计思路,有助于打造更加出色的应用界面。通过学习和实践,开发者可以将这些特效应用到自己的项目中,提高应用的...

    H5 输入框的提示信息

    例如,Bootstrap提供了`form-control`类,可以方便地设置输入框样式,包括提示信息的显示效果。此外,一些表单验证库如jQuery Validation或Formik也能帮助我们更好地处理用户输入和提示信息的交互。 总结,H5输入框...

    输入框特效

    总结来说,"输入框特效"不仅关乎美观,更关乎功能性和用户体验。开发者需要掌握CSS、JavaScript、jQuery等相关技术,同时关注响应式设计和无障碍性,以实现既实用又吸引人的输入框特效。在实际项目中,可以根据需求...

    易语言TaskDialog版输入框源码

    总结来说,易语言TaskDialog版输入框源码是一个结合了Windows API调用和易语言编程的示例,它展示了如何在易语言中实现更高级的用户交互功能。开发者可以通过学习和实践这段代码,增强自己在API使用、错误处理和用户...

    多种漂亮炫酷的输入框特效

    总结来说,通过HTML定义基础结构,CSS进行样式定制,JavaScript和jQuery提供交互逻辑,我们可以创造出各种漂亮且炫酷的输入框特效。这些特效不仅可以提高网页的视觉吸引力,还能提升用户在搜索或其他数据输入场景下...

    html带图标输入框 适合手机端

    总结起来,创建一个适用于手机端的HTML带图标输入框,需要结合HTML的`&lt;input&gt;`、`&lt;label&gt;`和`&lt;img&gt;`标签,以及CSS来实现图标定位和样式定制。在设计过程中,应注重用户体验,确保在不同屏幕尺寸下的可读性和可用性。...

    输入框内容显示与隐藏

    总结来说,输入框内容的显示与隐藏涉及前端UI设计、JavaScript交互、CSS样式、前后端数据传输以及安全策略等多个方面。开发者需要根据具体需求和安全规范,选择合适的方法来实现这一功能。同时,始终牢记用户隐私...

    jquery实现输入框点击出现下拉列表树插件代码

    总结来说,这个项目展示了如何利用jQuery和HTML5构建一个交互式的下拉列表树插件,它涉及了事件监听、DOM操作、CSS样式以及可能的Ajax异步数据加载。这个插件的实现可以作为学习和参考,帮助开发者更好地理解和应用...

    输入框的自动提示实例

    总结来说,输入框的自动提示功能是通过前端与后端的紧密配合来完成的,它涉及到用户交互、数据处理和网络通信等多个方面的技术。掌握这一功能的实现可以帮助开发者提升应用的用户体验,同时也是提高编程技能的重要...

    鼠标点击拉长的HTML5输入框.rar

    总结来说,这个项目展示了HTML5和CSS3在提升用户体验方面的强大能力。通过理解和运用这些技术,开发者可以创造出更具吸引力和用户友好性的网页应用。对于想要学习和掌握前端开发的人员,这样的实践案例提供了很好的...

    jquery实现输入框字数限制代码

    这个例子是基础实现,可以根据实际需求进行扩展,比如添加提示信息、动态改变输入框样式等。例如,当剩余字数少于10时,可以改变提示文字的颜色以警告用户。 在压缩包文件`jquery.showWordCount`中,可能包含了上述...

    6位验证码输入框.zip

    总结,微信小程序中的6位验证码输入框实现涉及WXML结构设计、WXSS样式控制以及JavaScript事件处理。通过隐藏光标、模拟letter-spacing属性,我们可以创建一个符合预期的、具有良好用户体验的验证码输入组件。在实际...

    表单输入框下拉菜单全攻略

    总结,表单输入框下拉菜单在网页设计中扮演着至关重要的角色。理解其基本原理,熟练运用HTML、CSS和JavaScript,以及关注用户体验和无障碍性,能够创建出高效、友好的交互界面。通过不断学习和实践,开发者可以创造...

    点击输入框默认文字消失效果

    ### 总结 以上四种方法分别实现了不同的输入框交互效果,包括改变边框颜色、选中提示文本以及移除默认提示文本等。这些技巧不仅可以提升网页的美观度,还能显著改善用户的交互体验。开发者可以根据实际需求灵活选择...

    Jquery点击输入框弹出层

    总结,通过使用jQuery,我们可以轻松实现点击输入框弹出层的功能。这个过程中涉及到了事件监听、DOM操作以及基本的CSS样式控制,这些都是前端开发中非常基础且重要的技能。记住,实践是检验真理的唯一标准,动手尝试...

    仿京东,支付宝密码输入框和密码键盘

    总结来说,自定义控件是Android开发中的一个重要技能,它允许开发者创造出符合应用风格的个性化界面。通过仿照京东、支付宝的密码输入框和键盘,我们可以学习到如何结合布局设计、事件处理、动画效果等多方面知识,...

    android dialog输入框获取数据

    首先,我们需要创建一个XML布局文件,该文件将定义Dialog中的控件及其样式。示例代码如下: ```xml android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_...

    html5配合css3实现带提示文字的输入框

    本教程将详细讲解如何...总结起来,创建一个带有提示文字的输入框,主要涉及HTML5的`placeholder`属性、CSS3的样式以及JavaScript的事件监听。通过这些技术的组合,可以实现具有动态效果和良好交互性的网页输入组件。

Global site tag (gtag.js) - Google Analytics