转载：http://www.cnblogs.com/JensonBin/archive/2011/02/23/1962099.html

scrollbar属性、样式详解
1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
    overflow-x水平方向内容溢出时的设置
    overflow-y垂直方向内容溢出时的设置
    以上三个属性设置的值为visible(默认值)、scroll（显示）、hidden（隐藏）、auto（自动）。

　例如：显示y轴下拉条：  style="overflow-y:scroll"

 行数  rows="15" 列数 cols="45"
<textarea rows="15" cols="45" placeholder="请输入不超过500字"  style="overflow-y:scroll"></textarea>

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>

Scrollbar-Face-Color为滚动条表面颜色设定；
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定；
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定；
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定；
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
Scrollbar-Track-Color为滚动条底板颜色设定；
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

举例：

body { 
background-color: #ffffff; 
color: #336699; 
SCROLLBAR-FACE-COLOR: #BED8EB; 
SCROLLBAR-SHADOW-COLOR: #DDF8FF; 
SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1; 
SCROLLBAR-3DLIGHT-COLOR: #DDF8FF; 
SCROLLBAR-DARKSHADOW-COLOR: #92C0D1; 
SCROLLBAR-TRACK-COLOR:#BED8EB; 
SCROLLBAR-ARROW-COLOR: #92C0D1 
}

textarea 滚动条属性设置的更多相关文章

  1. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  2. DEV控件GridControl常用属性设置

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

  3. DevExpress GridView属性设置 z

    本文主要总结控件的属性设置,附上图片,给大家一个参考.后续会给大家分享功能实现和使用的小技巧. GirdControl是数据的容器,它包含多种显示方式,GridView则是一种二维表格视图. 绑定数据 ...

  4. （转）DevExpress GridView属性设置

    GirdControl是数据的容器,它包含多种显示方式,GridView则是一种二维表格视图. 绑定数据源: List<Student> list = new List<Studen ...

  5. mvc中动态给一个Model类的属性设置验证

    原文:mvc中动态给一个Model类的属性设置验证 在mvc中有自带的验证机制,比如如果某个字段的类型是数字或者日期,那么用户在输入汉字或者英文字符时,那么编译器会自动验证并提示用户格式不正确,不过这 ...

  6. DEV控件GridControl常用属性设置（转）

      1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView. ...

  7. 转：c# WinForm开发 DataGridView控件的各种操作总结（单元格操作，属性设置）

    一.单元格内容的操作 *****// 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index  ...

  8. Dev属性设置

    DisplayFormat 设置显示格式如:{0:P}表示显示为百分号模式.如数据源中为0.5.表示出来为50% 2.GridContro总合计及分组合计: 常规总合计直接RunDesigner-Gr ...

  9. DEVexpress GridControl 属性设置

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

随机推荐

  1. 第7章 "敏捷+"项目管理

    7.1  导入敏捷项目管理的步骤 1.导入敏捷的步骤 (1).培训 (2).教练与引导 (3).内化 2.敏捷混合型模式 7.2  项目启动与敏捷合同 1.敏捷项目启动 2.敏捷签约模式 在传统项目管 ...

  2. 深入理解Aspnet Core之Identity(5)

    主题 本篇我将会介绍验证用户的机制当账户被创建的时候,同样 这个过程主要有IUserValidator这个接口来实现的,和密码验证一样Identity同样也内置已经实现好的账户验证.账户验证的比较简单 ...

  3. 深入解析SQL Server高可用镜像实现原理

    本文来自网易云社区 SQL Server 是windows平台.NET架构下标配数据库解决方案,与Oracle.MySQL共同构成了DB-Engines Ranking的第一阵营,在国内外企业市场中有 ...

  4. 【BZOJ2328】 [HNOI2011]赛车游戏

    BZOJ2328 [HNOI2011]赛车游戏 前言 这道题目我真的佛了,卡精度+卡时间这就是下一个聊天鬼才. Solution 首先可以二分出最大速度,然后考虑下坡的话可能有更好的解,然后这样子算一 ...

  5. Python3.5 学习二十一

    本节内容概要: 上节回顾及补充知识点: 一.请求周期: URL->路由->函数或类->返回字符串或者模板 Form表单提交: 提交->url-函数或者类中的方法 -....(执 ...

  6. 讲讲我当年是怎么拿到AI研发公司offer的

    前言 很多的老铁私信问我,当年我是怎么拿到公司offer的,我记得我毕业是2015年,那时人工智能这个行业还没热起来,能提供的岗位很少但是面试的人更少,我又是本专业毕业的,所以当初找工作还算顺利,去面 ...

  7. captcha ~ 生成验证码图片

    验证码在我们的世界中可以保护我们的信息安全的一个保障之一 这就是生成验证码的代码     # 导报 from captcha.image import ImageCaptcha #验证码的包 from ...

  8. npm私服搭建

    本文是在 centos7 下利用 nexus 搭建 npm 私服的整理 一.安装 JDK 1.下载 JDK 2.安装 tar zxvf jdk-8u191-linux-x64.tar.gz .0_19 ...

  9. Docker仓库(四)

    一.什么是仓库 仓库就是集中存放镜像的地方,分为公共仓库和私有仓库,一个容易混淆的概念是注册服务器,实际上注册服务器是存放仓库的具体服务器,一个注册服务器可以有多个仓库,而每个仓库下面有多个镜像 二. ...

  10. How To Crop Bitmap For UWP

    裁剪图片主要是借助于 BitmapDecoder.GetPixelDataAsync() 以及 BitmapTransform对象来实现. 实现的代码如下: using System; using S ...