好看的css文本框样式,css文本样式标签都有哪些

html文本框圆角边框css样式怎么写

html文本框圆角边框css样式可以通过改变border-radius属性的值进行添加。border-radius值的单位可以使用“px”，也可以使用“%”，单位不同效果也不同。具体代码如下：

创新互联建站自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站制作、做网站、外贸营销网站建设、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

!doctype html

html

head

meta charset="UTF-8"

titleDocument/title

/head

body

textarea style="border-radius: 50px; width: 100px; height: 100px;" /textarea

/body

/html

运行效果如图：

扩展资料：

CSS具有以下特点：

1、丰富的样式定义：

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改：

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

3、多页面应用：

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

参考资料百度百科——css

几种漂亮的文本框样式

只有下划线的文本框：

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

软件序列号式的输入框：

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"

软件序列号式的输入框(完整版)：

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;iT.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"

输入框景背景透明：

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

鼠标划过输入框，输入框背景色变色：

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"

输入字时输入框边框闪烁(边框为小方型)：

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

输入字时输入框边框闪烁(边框为虚线)：

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"

自动横向廷伸的输入框：

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

自动向下廷伸的文本框：

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

html中如何用css让文本框有立体的感觉

style type="text/css"

INPUT.smallInput

{

BACKGROUND-COLOR:#FFFFFF;

COLOR:#000000;

FONT-SIZE:9pt;

FONT-WEIGHT:Normal;

TEXT-DECORATION:None;

FOTN-FAMILY:宋体,verdana,Arial, Helvetica;

TEXT-ALIGN:Left;

BORDER-TOP:3 Hidden #808080;

BORDER-LEFT:3 Hidden #808080;

BORDER-RIGHT:3 Hidden #FFFFFF;

BORDER-BOTTOM:3 Hidden #FFFFFF;

CURSOR:Text;

}

/style

这个css样式是 --单行文本框设置代码--，你可以修改一下做出自己想要的效果 ，然后你的文本框调用这个样式就可以了