|
|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
使用CSS隐藏textarea的滚动条
本文关键字词：textarea，textarea美化，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">
注：若想隐藏textarea的滚动条，只需加上下面的代码即可，当输入的内容超过一定的高度后，滚动条会自动显示出来。
<textarea wrap="off | hard | virtual | physical" style="overflow:auto;"></textarea>
说明：
wrap="off" 不自动换行，默认属性
wrap="hard" 自动硬回车换行，换行标记不会被一起发送
以下这两个参数都会让输入的文字超过栏宽时候自动换行，发送数据的时候，不同之处见其后说明
wrap="virtual" 只有在按回车的地方有换行，其他部分不做变化
wrap="physical" 依照输入的格式发送数据
下面是代码例子(直接拷贝就能运行)：
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- html,body{font-family:Tahoma;margin:0;padding:20px;overflow:hidden;}
- input,textarea{margin:0;padding:0;font-size:13px;}
- label{padding:2px 0;display:block;}
- label input{width:300px;border:solid 1px #ccc;}
- textarea{width:300px;border:solid 1px #ccc;overflow:auto;}
- </style>
- </head>
- <body>
- <div style="width:300px;font-size:12px;text-align:center;line-height:22px;color:#fff;background:#e00;">这里的宽度与input，textarea都是300px</div>
- <label>
- <input type="text" />
- </label>
- <label>
- <textarea wrap="virtual"></textarea>
- </label>
- <label>
- <textarea wrap="hard"></textarea>
- </label>
- <label>
- <textarea wrap="off"></textarea>
- </label>
- <label>
- <textarea wrap="physical"></textarea>
- </label>
- </body>
- </html>
|
|
发表于 2014-7-1 08:38:10
