html滚动条 textarea属性设置
发布时间:2013-01-04 10:20:59 作者:佚名
我要评论
本文介绍html滚动条 textarea属性设置:overflow内容溢出时的设置,scrollbar-3d-light-color立体滚动条亮边的颜色等等相关设置,有需要的朋友可以详细参考下,希望对你们有帮助
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>
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中如何设置超出部分自动显示滚动条,下面为大家详细介绍下让div中的内容超出后自动显示滚动条具体实现,感兴趣的朋友不要错过2014-02-18
- 本文为大家介绍下关于HTML中的滚动条/去掉滚动条问题,下面有个不错的示例,大家可以参考下2014-02-18
- 局部出现滚动条,这样就不会破坏整体的样式和布局了,下面有个不错的示例,大家可以拷贝代码到文本文档修改文本后缀名,txt 为 .html 预览效果2013-10-18
- 在网页中删除一些东西的时候滚动条往往还在删除东西之前的位置,而不是非常不人性化的跑到那一页的顶部,那么这是怎么实现的呢?下面就给大家来分享一些其他关于html滚动条2013-06-16
html与嵌入其中的flash均存在滚动条的情况分析及处理方法
a.swf被添加到网页中, a.swf和html页面同时存在滚动条, 项目经理提了一个BT的需求---处理a.swf鼠标滚动的时候html页面不执行滚动, 反之则执行html页面的滚动,遇到此问题的2013-01-23- 具体的表现就是页面元素(这里以table为例)的滚动条在IE7中正常显示,在IE6中不显示。2009-07-25
- 这篇文章主要介绍了HTML 隐藏滚动条和去除滚动条的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-07-01


最新评论