您当前的位置:首页 > 美文摘抄 > 内容

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

本文目录

  • 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{}添加样式即可。


  • 声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,谢谢。

    上一篇: 蔬菜饼的家常做法,八款好吃的蔬菜饼做法(面点师分享懒人蔬菜饼做法)

    下一篇: 1一3岁儿童简笔画,3-6岁儿童简笔画(创意简笔画临摹素材61例)



    推荐阅读

    网站内容来自网络,如有侵权请联系我们,立即删除! | 软文发布 | 粤ICP备2021106084号