`
songzhan
  • 浏览: 240171 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

简单的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;

}
分享到：
| css实例 <转载>
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    文本框 css 样式

    文本框 css 样式 鼠标移上去文本框变成浅绿色 ...input文本框样式 只有下划线的文本框： 软件序列号式的输入框： 软件序列号式的输入框(完整版)： 输入框景背景透明： 鼠标划过输入框，输入框背景色变色： 等等

    超级好看的文本框样式

    有了它之后，页r面上的文本框就非常好看啦，用法很简单，直过复制过来用就可以啦，input表单元素也是通用的

    CSS文本框+FLASH+XML图片文字样式效果[精]

    很漂亮的效果,绝对满足一般人对网站美观的需求... 动态展示!

    自定义file文本框样式

    一般的file文本框样式太简单，往往与网站整体样式不协调，现在可以用这种方式改变file的样式

    input文本框样式代码实例

    input文本框样式代码实例

    HTML5&CSS3网页制作：CSS控制表单样式.pptx

    CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素，重置浏览器的默认样式时，...

    CSS定义下划线样式

    CSS定义下划线样式_莱茵河的小鱼_新浪博客.mht

    HTML文本框参考样式及常见操作技巧大全

    网页设计中，常常要使用html文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引...如上实例所示，其实这个html文本框样式非常简单，用到了css的伪

    数据库 图片

    数据库 图片css文本框样式收集

    文本框样式备忘（资源文件）

    请勿下载INPUT { border-left: #fff 1px solid; border-top: #fff 1px solid; border-right: #fff 1px solid; border-bottom: #fff 1px solid; margin: 0px 0px 15px 10px; padding-left: 10px;...}

    CSS样式风格定义

    系统默认提供的CSS样式风格定义 说　明：在《动易网站管理系统》中，CSS样式风格定义是可以自己自由定义的，也说是说您可以自由添加Ｎ多个自定义的风格，然后在各频道的版式模板中调用就行了。下面提供的是系统默认...

    CSS3气泡一样文本框动画特效

    CSS3气泡一样文本框动画特效是一款CSS3 Hover属性制作鼠标悬停图标或标题展示动画文本框效果。

    css3 input文本框动画特效

    css3 input文本框动画特效是一款基于css3制作的input文本框链接地址和邮箱格式输入框焦点ui特效。

    CSS为指定的input文本框添加背景

    其实代码很简单，只需要指定input的background-image样式即可，下面是一段范例代码 复制代码代码如下: input#sometextbox { background-image:url(‘back-image.gif’); background-repeat:no-repeat; padding-left...

    css样式的在线编辑器

    CSS样式编辑器，选择你所要的属性，右边的文本框会显示代码和样式的效果，非常实用。

    文本框input聚焦失焦样式实现代码

    首先用css的伪类：focus可以改变。 文本框的 html代码假设如下： 代码如下: &lt;dl&gt; &lt;dt&gt;Name: &lt;dt&gt; &lt;dd&gt;&lt;input type=”text” /&gt;&lt;/dd&gt; &lt;dt&gt;Password: &lt;dt&gt; &lt;dd&gt;&lt;input type=”password” /&gt;&lt;/dd&gt; &lt;dt&gt;...

    bootStrap_上传的JS和样式文件

    可以直接引用的上传的js css组件，非常好用方便，亲测可用

    css常用样式表

    对asp中常用的按钮、文本框、复选框等控件样式进行编辑，让其外观更加友好！

    《CSS全程指南》随书光盘

    7.2.1 文本框样式 163 7.2.2 文本域样式 166 7.2.3 按钮样式 166 7.2.4 下拉列表样式 167 7.3 小结 169 第3篇 深入了解 第8章 CSS滤镜 172 8.1 滤镜概述 173 8.2 滤镜属性 173 8.2.1 Alpha属性 174 8.2.2 Blur属性 ...

    CSS 文本域和按钮对齐不一致解决方案

    文字要包含在label标签中，并设置行高，否则文字会与文本框的顶 端对齐。文本框要设置vertical-align:middle;否则文本框与button顶端对齐。button中文字垂直居中，要设置高和行高，行高要...//CSS 代码 复制代码代码

Magicbox
Global site tag (gtag.js) - Google Analytics