正文
好看的文本框css样式,好看的文本框css样式
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
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样式是
--单行文本框设置代码--，你可以修改一下做出自己想要的效果
，然后你的文本框调用这个样式就可以了
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
文本框CSS样式问题
如果你不想要白边，就把
border:
solid
1px
#cacaca;去掉，ie和火狐的处理边框是不一样的，ie把边框放到文本框的外面，火狐是放到文本框的里面
想百度的输入框怎么做啊？我想知道输入框应该怎么美化就好看了，不是那种直接的文本框。急……
可以用css来改变文本框的样式，比如下面这个文本框是没有边框的：
input type=text value="" style="border:0"
下面这个文本框的背景是用图片的，这样就可以做出任何你可以想象出的样式了：
input type=text value="" style="border:0; background:url(back.jpg) no-repeat; width:100px; height:22px"
补充一下：百度所用的文本框样式是：
input type=text value="" style="width:404px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;background:url() no-repeat -304px 0;_background-attachment:fixed;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;margin:0 5px 0 0"
看起来虽然很复杂，但原理是一样的。你把这段直接复制到自己的网页，效果就跟百度一样的了
几种漂亮的文本框样式
只有下划线的文本框：
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
