textarea属性设置详解

导读大家好,霖霖来为大家解答以上问题。textarea属性设置详解很多人还不知道,现在让我们一起来看看吧!  1.overflow内容溢出时的设置(设...

大家好,霖霖来为大家解答以上问题。textarea属性设置详解很多人还不知道,现在让我们一起来看看吧!

  1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)

  overflow-x水平方向内容溢出时的设置

  overflow-y垂直方向内容溢出时的设置

  以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

  2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)

  scrollbar-arrow-color上下按钮上三角箭头的颜色

  scrollbar-base-color滚动条的基本颜色

  scrollbar-dark-shadow-color立体滚动条强阴影的颜色

  scrollbar-face-color立体滚动条凸出部分的颜色

  scrollbar-highlight-color滚动条空白部分的颜色

  scrollbar-shadow-color立体滚动条阴影的颜色

  我们通过几个实例来讲解上述的样式属性:

  1.让浏览器窗口永远都不出现滚动条

  没有水平滚动条

  body style="overflow-x:hidden"

  没有垂直滚动条

  body style="overflow-y:hidden"

  没有滚动条

  body style="overflow-x:hidden;overflow-y:hidden"或body style="overflow:hidden"

  2.设定多行文本框的滚动条

  没有水平滚动条

  < textarea style="overflow-x:hidden">< /textarea>

  没有垂直滚动条

  < textarea style="overflow-y:hidden">< /textarea>

  没有滚动条

  < textarea style="overflow-x:hidden;overflow-y:hidden">< /textarea>

  或< textarea style="overflow:hidden">< /textarea>

  3.设定窗口滚动条的'颜色

  设置窗口滚动条的颜色为红色body style="scrollbar-base-color:red"

  scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。

  加上一点特别的效果:

  body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon"

  4.在样式表文件中定义好一个类,调用样式表。

  style

  .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}

  /style

  这样调用:

  < textarea class="coolscrollbar">< /textarea>

  textarea颜色及边框设置:

  < textarea style="border:red solid;border-width:1 1 1 1;color:#CCCCCC;">< /textarea>

  HTML中的标签textarea的属性有:

  1、cols,垂直列。在没有做样式表设置的情况下,它表示一行中可容纳下的字节数。例如cols=60,表示一行中最多可容纳60个字节,也就是30个汉字。另外要注意的是,文本框的宽度就是通过这个来调整,输入好cols的数值,然后再定义输入文字字体的大小(不定义的话,会采用默认值),那么文本框的宽度就确定了。

  2、rows,水平列。表示可显示的行数,例如rows=10,表示可显示10行。超过10行,则需要拖动滚动条来浏览了。(同上,文本框的高度就是通过这个来控制的。)

  3、name,文本框的名称,这项必不可省,因为存储文本的时候必须用到。

  4、warp,当warp="off"表示该文本区域中不自动换行,当然不写默认是自动换行的。这个参数一般用得比较少。

  5、style,这是个非常实用的参数,可以用来设置文本框的背景色,滚动条颜色及形式,边框色,输入字体的大小颜色等等。

  6、class,一般用来调用外部css里边的设置。

本文到此结束,希望对大家有所帮助。

免责声明:本文由用户上传,如有侵权请联系删除!