几个简单的HTML文本框样式

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

<wbr></wbr>

鼠标划过输入框,输入框背景色变色:
<INPUTvalue="Type here" NAME="user_pass" TYPE="text" SIZE="29"οnmοuseοver="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
οnmοuseοut="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" οnfοcus="borderColor(this);"οnblur="clearTimeout(oTime);">

<wbr></wbr>

输入字时输入框边框闪烁(边框为虚线):
<style>
#oText{border:1px dotted #ff0000;ryo:expression_r(οnfοcus=functionlight(){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},οnblur=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">


  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要设计一个美观的消息通知文本框,可以考虑以下几个方面: 1. 整体布局:可以选择一个合适的容器,比如说 div 或者 section,然后设置其宽度、高度、边框、圆角等样式来创建一个基本的框架。 2. 背景颜色和透明度:可以选择一个合适的背景颜色,使其与整个页面的配色搭配得当。同时,可以考虑使用透明度来调整消息通知框的明暗程度,使其更加美观。 3. 消息内容的样式:可以使用 HTML 标签来设置消息文本的样式,比如说使用 h1、h2、p 标签来设置标题和正文的样式。此外,可以通过 CSS 样式来设置文字的颜色、大小、字体等属性。 4. 动态效果:可以考虑添加一些动态效果,比如说使用 CSS 动画来实现消息通知框的淡入淡出效果,或者使用 JavaScript 来实现弹出框的效果。 下面是一个简单的示例代码,可以根据自己的需求进行修改和完善: ```html <div class="notification-box"> <p class="notification-content">您有 3 条新消息</p> </div> ``` ```css .notification-box { width: 200px; height: 50px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); text-align: center; } .notification-content { font-size: 16px; color: #333; line-height: 50px; } ``` 这段代码实现了一个简单的消息通知框,包括了容器的大小、背景颜色、边框、圆角等样式,以及消息文本的样式。你可以根据需要添加更多的样式和效果,让其更加美观。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值