本文目录
- html中如何用css让文本框有立体的感觉
- 如何定义HTML页面输入框内输入的文本的样子
- html文本框圆角边框css样式怎么写
- 文本域的HTML文本域几种样式
- html文本框效果
- html5的文本框样式有哪些
- HTML如何设置文本框里面的字体
- html怎样对input样式进行样式
html中如何用css让文本框有立体的感觉
《styletype=“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:3Hidden#808080;BORDER-LEFT:3Hidden#808080;BORDER-RIGHT:3Hidden#FFFFFF;BORDER-BOTTOM:3Hidden#FFFFFF;CURSOR:Text;}《/style》这个css样式是--单行文本框设置代码--,你可以修改一下做出自己想要的效果,然后你的文本框调用这个样式就可以了
如何定义HTML页面输入框内输入的文本的样子
1楼回答的已经很好了。我补充一些要注意的。1、为了兼容的需要,一般给input定了高度之后(比如:height:20px;),还需要设置行高以确保文字垂直居中:line-height:20px; 行高必须与高度保持一致。2、例子: 《input type=“text“ id=“text“ name=““ size=“15” /》所示中要注意写size的值,不然文字输入多了或造成溢出。(可能还有别的方式,不过我自己还没尝试过)3、可以给每一个input定义一个选择器,以方便单独定义样式。html: 《input type=“text“ id=“text“ name=““ size=“15” /》css: input#text{color:#f00; /*红色文字*/width:160px; /*定义宽度*/height:24px; /*定义高度*/line-height:24px;/*定义行高,确保垂直居中*/border:1px solid #dfdfdf /*定义边框,1像素,浅灰色 1楼设的灰色较深,一般不适合,白色背景来说,#dfdfdf的颜色之比较合适 */font:normal 12px/24px ““ /*定义字体,不加粗,12像素字,24像素行距,使用默认字体*/}
html文本框圆角边框css样式怎么写
html文本框圆角边框css样式可以通过改变border-radius属性的值进行添加。border-radius值的单位可以使用“px”,也可以使用“%”,单位不同效果也不同。具体代码如下:
《!doctype html》
《html》
《head》
《meta charset=“UTF-8“》
《title》Document《/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
文本域的HTML文本域几种样式
1.没有滚动条的文本域(无边框)《textarea style=border: 0; overflow: auto; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)》《/textarea》2.红色边框的文本域《textarea style=border: #FF0000 1px solid; overflow: visible; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)》《/textarea》3.无边框有滚动条《textarea style=scrollbar-face-color:#ff80ff;border:0px;background-image:url(http://expert.csdn.net/images/ad/dby3_database_120.GIF);color:#ffffff;font-size:15pt;font-weight:bold》雨中人《br》雨中人《br》雨中人《br》雨中人《br》雨中人《br》雨中人 《br》雨中人《br》雨中人《br》雨中人《br》雨中人《br》雨中人《 br》雨中人《br》雨中人《br》雨中人《br》雨中人《br》雨中人《br》雨中人《br》雨中人《br》《/textarea》4.比较好看的一个《input name=email type=text id=email style=height:19;border-top: 1px solid #808080;border-right: 1px solid #D4D0C8;border-bottom: 1px solid #D4D0C8;border-left: 1px solid #808080; value= size=29》《br》《textarea name=content cols=36 rows=8 id=content style=border: 1 solid #888888;LINE-HEIGHT:18px;padding: 3px;》《/textarea》《textarea style=border: #FF0000 1px solid; overflow: visible; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)》《/textarea》其它:《textarea style=border: 0; overflow: auto; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)》《/textarea》1、设置文本域的字体《TEXTAREA STYLE=font-size:9pt;font-family:verdana;color:#333333》输入内容《/textarea》2、设置文本域的背景色《TEXTAREA STYLE=background-color:#ffffff》输入内容《/textarea》3、文本域的虚线边框设置《TEXTAREA STYLE=border:1px dotted #6CABE7;》输入内容《/textarea》4、文本域的实线边框设置《TEXTAREA STYLE=border:1px solid #6CABE7;》输入内容《/textarea》5、文本域的点线边框设置《TEXTAREA STYLE=border:2px dotted #6CABE7;》输入内容《/textarea》6、 设置文本域的背景图《TEXTAREA STYLE=background-attachment: fixed; background-image: url(背景图所处位置)》《/textarea》
html文本框效果
《style type=“text/css“》 .MyInput{v:expression(onmouseover=function(){this.style.border=’1px solid yellow’},onfocus=function(){this.style.border=’1px solid red’},onblur=function(){this.style.border=’1px solid #000000’})} .MyInput{width:150px} 《/style》 在每个要用到效果的Input里加入Class=“MyInput“ 《input type=“text“ name=“name“ id=“name“ class=“MyInput“》
html5的文本框样式有哪些
输入框景背景透明:《input style=“background:transparent;border:1px solid #ffffff“》鼠标划过输入框,输入框背景色变色:《INPUT value=“Type here“ NAME=“user_pass“ TYPE=“text“ SIZE=“29“ onm ouseover=“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_r(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_r(this.width=this.scrollWidth)“ value=“abcdefghijk“》自动向下廷伸的文本框:《textarea name=“content“ rows=“6“ cols=“80“ onpropertychange=“if(this.scrollHeight》80) this.style.posHeight=this.scrollHeight+5“》输入几个回车试试《/textarea》只有下划线的文本框:《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;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“》
HTML如何设置文本框里面的字体
使用CSS样式选择器...选择需要设置字体的文本框或者、设置一个通用的..比如:《textareaid=“XX“》《/textarea》《styletype=“text/css“》#XX{///设置字体的样式}《/style》
html怎样对input样式进行样式
可以直接定义input{color:#ccc;border: ;}等全局属性。所有Input的文本框都会应用该样式。
可以定义某种类型文本框,比如 input[type=’text’]{}就是所有文本框类型为text的都应用该样式。
可以直接给某个input添加class,然后给指定的class进行样式渲染,比如《input type=“button“ class=“inp-btn“/》那么就给 .inp-btn{}添加样式即可。