`
songzhan
  • 浏览: 250053 次
  • 性别: 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实例 <转载>
评论
发表评论

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

相关推荐

    CSS3文本框动画输入标签效果.zip

    "CSS3文本框动画输入标签效果"是一个巧妙地结合了jQuery和CSS3技术的特效，旨在提升用户在填写表单时的视觉体验和互动感受。这个特效的核心在于，它能够以动画的形式动态显示和隐藏输入框的标签，为原本静态的表单...

    文本框 css 样式

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

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

    此外，"txt源文件"可能包含了Flash动画的ActionScript代码或者CSS文本框样式的具体定义，这些源文件对于开发者来说非常重要，因为它们揭示了项目的内部工作原理，便于学习和修改。 总的来说，这个项目展示了如何将...

    CSS文本框后插入背景

    然而，传统的文本框样式通常较为单一，只是一个白色背景搭配黑色边框，这样的设计在现代网页的视觉呈现上可能显得过于单调。为了提升用户体验和网页的整体美观度，我们可以利用CSS来对文本框进行美化，例如在文本框...

    超级好看的文本框样式

    "超级好看的文本框样式" 提供了一种方法，通过CSS（层叠样式表）来增强文本框的视觉效果，使其更加吸引人且符合整体设计美学。这个资源的目的是帮助开发者轻松实现美观的文本框，而无需复杂的代码或深厚的前端设计...

    css文本框与按钮美化效果代码

    CSS 文本框与按钮美化效果代码 CSS 表单美化是 Web 开发中非常重要的一方面，今天我们将讨论如何使用 CSS 使文本框与按钮变得更加...使用 CSS美化文本框与按钮非常简单，并且可以使我们的网页变得更加美观和用户友好。

    html透明文本框

    综上所述，创建HTML透明文本框的关键在于使用CSS进行样式控制，包括`opacity`、`background-color`、`border`、`outline`等属性。通过合理搭配这些属性，我们可以实现各种自定义的文本框效果。在提供的压缩包文件中...

    Css写透明文本框,无边界文本框

    在CSS（层叠样式表）的设计与开发过程中，创建一个既美观又实用的透明文本框且没有明显的边界的技巧是一项非常实用的技能。这不仅能够提升网页的整体视觉效果，还能增强用户体验。根据提供的标题、描述及部分代码...

    css+jquery美化文本框，选择框

    为了提供更好的用户体验和吸引用户，开发者经常使用CSS（层叠样式表）和jQuery来对这些元素进行美化和增强功能。下面将详细介绍如何使用CSS和jQuery来美化文本框和选择框。 **CSS美化文本框：** 1. **基本样式设置...

    自定义file文本框样式

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

    三种文本框样式js 日历

    总的来说，"三种文本框样式js日历"是一个展示JavaScript日历组件多样性的项目，它涉及了前端开发中常见的JavaScript、CSS和HTML技术，以及UI/UX设计原则。通过学习和理解这些内容，开发者可以创建出更加符合用户需求...

    HTML文本框样式

    在探讨“HTML文本框样式”这一主题时，我们不仅会涉及基本的HTML元素，还会深入到CSS和JavaScript的综合运用，以实现丰富的文本框样式效果。以下是对标题、描述及部分代码示例中的知识点进行的详细解读： ### HTML...

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

    在本文中，我们将深入探讨如何使用CSS3来创建一个气泡样式的文本框动画特效，这个特效常用于吸引用户注意力并提升网页互动性。我们基于提供的"CSS3气泡一样文本框动画特效.zip"文件，其中包含了一个示例HTML文件...

    用css实现隐藏文本框

    ### 使用CSS实现隐藏文本框的方法 在Web开发中，有时候我们需要隐藏某些输入字段或表单元素，例如在处理用户登录信息、表单提交时的一些预填充数据或是进行一些客户端验证时，隐藏字段可以提供额外的功能性和安全性...

    好看的文本框样式，簡單代碼

    "文本框样式和输入框效果" 在 HTML 和 CSS 中，我们可以使用各种样式和脚本来美化文本框和输入框的外观和行为。下面我们将详细介绍七种不同的文本框样式和输入框效果。 1. 只有下划线的文本框 使用 CSS 样式可以...

    js css3文本框编辑文字动画代码

    **CSS3** 是CSS（层叠样式表）的最新版本，提供了更多强大的样式和动画功能。在文字动画方面，CSS3提供了一系列的动画属性，如`transition`和`animation`，可以用来改变文本的外观、大小、颜色、透明度等，实现动态...

    CSS3输入文字input文本框动画效果

    4. **伪类选择器**：CSS3的伪类选择器如`:hover`, `:focus`, `:active`等可以帮助我们在不同状态时应用不同的样式，如改变文本框在鼠标悬停、获得焦点或被点击时的外观。 5. **自定义字体图标**：结合使用`@font-...

    css3 input文本框动画特效.zip

    1. **伪类选择器**：CSS3引入了一系列伪类选择器，如`:hover`, `:focus`, `:active`等，用于在不同状态下改变文本框的样式。例如，`:hover`可以在鼠标悬停时触发特定效果，`:focus`则在文本框获得焦点时激活特效。 ...

    css3 input文本框动画特效特效代码

    在CSS3中，input文本框动画特效是一种提升用户体验和网页设计视觉吸引力的重要技术。通过巧妙地运用CSS3的属性和方法，我们可以创建出各种各样的动态效果，使文本框在获得焦点、失去焦点或者在用户输入时产生独特的...

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