`

css

    博客分类:
  • css
CSS 
阅读更多
1、只有下划线的文本框:

<input style="border:0;border-bottom:1 solid black;background:;">

2、软件序列号式的输入框:

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

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

4、输入框景背景透明:

<input style="background:transparent;border:1px solid #ffffff">

5、鼠标划过输入框,输入框背景色变色:

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

6、输入字时输入框边框闪烁(边框为小方型):

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

7、输入字时输入框边框闪烁(边框为虚线):

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

8、自动横向廷伸的输入框:

<input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="abcdefghijk">

9、自动向下廷伸的文本框:

<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>


一、按钮样式

.buttoncss {

     font-family: "tahoma", "宋体"; /*www.52css.com*/

     font-size:9pt; color: #003399;

     border: 1px #003399 solid;

     color:#006699;

     border-bottom: #93bee2 1px solid;

     border-left: #93bee2 1px solid;

     border-right: #93bee2 1px solid;

     border-top: #93bee2 1px solid;

     background-image:url(../images/bluebuttonbg.gif);

     background-color: #e8f4ff;

     cursor: hand;

     font-style: normal ;

     width:60px;

     height:22px;

}


二、蓝色按钮

.bluebuttoncss {

     font-family: "tahoma", "宋体"; /*www.52css.com*/

     font-size: 9pt; color: #003366;

     border: 0px #93bee2 solid;

     border-bottom: #93bee2 1px solid;

     border-left: #93bee2 1px solid;

     border-right: #93bee2 1px solid;

     border-top: #93bee2 1px solid;*/

     background-image:url(../images/blue_button_bg.gif);

     background-color: #ffffff;

     cursor: hand;

     font-style: normal ;

}


三、红色按钮

.redbuttoncss {

     font-family: "tahoma", "宋体"; /*www.52css.com*/

     font-size: 9pt; color: #0066cc;

     border: 1px #93bee2 solid;

     border-bottom: #93bee2 1px solid;

     border-left: #93bee2 1px solid;

     border-right: #93bee2 1px solid;

     border-top: #93bee2 1px solid;

     background-image:url(../images/redbuttonbg.gif);

     background-color: #ffffff;

     cursor: hand;

     font-style: normal ;

}


四、选择按钮

.selectbuttoncss{

     font-family: "tahoma", "宋体"; /*www.52css.com*/

     font-size: 9pt; color: #0066cc;

     border: 1px #93bee2 solid;

     border-bottom: #93bee2 1px solid;

     border-left: #93bee2 1px solid;

     border-right: #93bee2 1px solid;

     border-top: #93bee2 1px solid;

     background-image:url(../images/blue_button_bg.gif);

     background-color: #ffffff;

     cursor: hand;

     font-style: normal ;

}

 

五、绿色按钮

.greenbuttoncss {

     font-family: "tahoma", "宋体"; /*www.52css.com*/

     font-size: 9pt; color: #0066cc;

     border: 1px #93bee2 solid;

     border-bottom: #93bee2 1px solid;

     border-left: #93bee2 1px solid;

     border-right: #93bee2 1px solid;

     border-top: #93bee2 1px solid;

     background-image:url(../images/greenbuttonbg.gif);

     background-color: #ffffff;

     cursor: hand;

     font-style: normal ;

}


六、图像按钮

.imagebutton{

     cursor: hand;     /*改变鼠标形状 www.52css.com*/

}


七、页面正文

body {

     scrollbar-face-color: #ededf3;

     scrollbar-highlight-color: #ffffff;

     scrollbar-shadow-color: #93949f;

     scrollbar-3dlight-color: #ededf3;

     scrollbar-arrow-color: #082468;

     scrollbar-track-color: #f7f7f9;

     scrollbar-darkshadow-color: #ededf3;

     font-size: 9pt; /*www.52css.com*/

     color: #003366;

     overflow:auto;

}


td { font-size: 12px }

th {

     font-size: 12px;

}


八、下拉选择框

select{

     border-right: #000000 1px solid;

     border-top: #ffffff 1px solid;

     font-size: 12px; /*www.52css.com*/

     border-left: #ffffff 1px solid;

     color:#003366;

     border-bottom: #000000 1px solid;

     background-color: #f4f4f4;

}


九、线条文本编辑框

.editbox{

     background: #ffffff;

     border: 1px solid #b7b7b7;

     color: #003366;

     cursor: text;

     font-family: "arial";

     font-size: 9pt;

     height: 18px;

     padding: 1px; /*www.52css.com*/

}


十、多行文本框

.multieditbox{

     background: #f8f8f8;

     border-bottom: #b7b7b7 1px solid;

     border-left: #b7b7b7 1px solid;

     border-right: #b7b7b7 1px solid;

     border-top: #b7b7b7 1px solid;

     color: #000000;

     cursor: text;

     font-family: "arial";

     font-size: 9pt;

     padding: 1px; /*www.52css.com*/

}


十一、阴影风格的表单

.shadow {

     position:absolute;

     z-index:1000;

     top:0px;

     left:0px; /*www.52css.com*/

     background:gray;

     background-color:#ffcc00;

     filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);

}


十二、只显一条横线的输入框

.logintxt{

     border-right: #ffffff 0px solid;

     border-top: #ffffff 0px solid;

     font-size: 9pt; /*www.52css.com*/

     border-left: #ffffff 0px solid;

     border-bottom: #c0c0c0 1px solid;

     background-color: #ffffff

}


十三、没有边框的输入框

.noneinput{

     text-align:center;

     width:99%;height:99%;

     border-top-style: none;

     border-right-style: none;

     border-left-style: none;

     background-color: #f6f6f6;

     border-bottom-style: none;

}




分享到:
评论

相关推荐

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    CSS中常用的 reset.css文件

    因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...

    birt公用CSS样式

    在创建BIRT报表时,CSS(Cascading Style Sheets)样式起到了至关重要的作用,它们用于控制报表的外观和布局,使其符合用户界面的需求。本主题将深入探讨“birt公用CSS样式”,并结合提供的文件内容进行详细说明。 ...

    HTML+CSS网页设计与布局从入门到精通

    《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...

    前端开源库-postcss-css-variables

    在前端开发领域,CSS Variables(也称为CSS自定义属性)是一种强大的工具,它允许开发者在整个样式表中定义和重用变量。PostCSS 是一个JavaScript工具,它可以解析CSS,执行一些任务,然后输出新的CSS。Postcss-css-...

    div+css手册

    《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...

    pycharm中显示CSS提示的知识点总结

    我们用pycharm写CSS的时候,是不是苦于没有提示,那么pycharm中如何显示CSS提示呢?下面小编给大家分享一下。 首先点击左上角的file菜单,选择Setting 接着选择Editor下面的Inspections选项,如下图所示 然后在...

    CSS:The Definitive Guide, 4th Edition[CSS权威指南](英文版)

    《CSS权威指南》第四版是CSS领域的重要著作,作者Eric A. Meyer凭借其深厚的行业经验和智慧,对CSS的各个方面进行了详尽的探讨。 本书从基础讲起,逐步深入到CSS的核心概念与应用。CSS权威指南第四版涵盖了CSS的...

    网页设计期末大作业+html+css

    9个网页布局,学校让做的网站作业,虽然是比较基础的网页静态页面,不过我也希望你能做的规范一些,我们专业制作学生网页作业,div css js 等通过dreamwear的工具实现规范化,比如文件夹的规范,代码写作的规范,...

    HTML外部引用CSS文件不生效原因分析及解决办法

    就比如我在css目录下面写了一个css样式文档:style.css。这时里面只有一句话: XML/HTML Code复制内容到剪贴板 body {  background-color: #ddd;  }  然后再我的html文件里面去引入这个外部css: XML/...

    CSS新世界1

    【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...

    CSS酷站CSS特效华丽CSS

    在本篇内容中,我们将深入探讨"CSS酷站"、"CSS特效"和"华丽CSS"相关的知识点,以及通过一些CSS精美示例来展示其魅力。 首先,"CSS酷站"是指那些运用创新和独特CSS技巧设计的网站,它们通常具有引人入胜的视觉效果和...

    Qt css样式大全+详细书签pdf.zip

    而Qt中的CSS(Cascading Style Sheets)样式则允许开发者通过类似网页CSS的方式定制Qt界面的外观和布局。本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料,旨在帮助开发者深入理解和...

    将AE制作的动画导出为CSS代码

    "将AE制作的动画导出为CSS代码"这一主题探讨的是如何将AE中的动画转换成可应用于网页的CSS代码,以便在网页上实现类似的动态效果。 AE提供了一种方式,通过插件或自定义脚本来将动画的关键帧数据转化为CSS3关键帧...

    DIV+CSS漂亮的样式

    本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例,特别是3D按钮和层模拟窗口移动的效果,这些都是现代网页设计中非常流行和实用的元素。 首先,3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...

Global site tag (gtag.js) - Google Analytics