textarea 滚动条属性设置

最新推荐文章于 2023-05-15 11:54:53 发布
最新推荐文章于 2023-05-15 11:54:53 发布
阅读量2.2k 收藏
点赞数
分类专栏： CSS 文章标签： firefox scroll 服务器 chrome 浏览器 ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_wei_1990/article/details/6741941
版权


请指定 wrap="off"。

<textarea wrap="off"></textarea>
此时除非遇到换行符，否则内容将一直向右。

IE 中默认情况下就会有横向滚动条；Firefox、Chrome 默认没有横向滚动条，要当内容超过 textarea 宽度后，才会出现。


mark
textarea的wrap属性
off：不自动换行； 
hard：自动硬回车换行，换行标记一同被传送到服务器中去；//下面没有滚动条 
soft：自动软回车换行，换行标记不会传送到服务器中去 //下面没有滚动条 

 默认是soft//帮助文档里写的

 在IE和firefox下，都没有下面的滚动条//自己试过了！

------------------------------------------------------------------------------------------------------

scrollbar属性、样式详解

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>

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
}
chen_wei_1990
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
textArea滚动条样式
11-10
本文将详细介绍如何使用JavaScript来实现`textarea`滚动条样式的自定义，以实现跨浏览器的兼容性。 首先，我们需要理解CSS3提供了对滚动条样式的一些控制，如`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等...
让textarea控件的滚动条怎是位与最下方
10-30
在HTML中，textarea控件的scrollTop属性可以用来设置滚动条的位置。通过设置scrollTop的值为滚动条的高度，可以让滚动条滚动到最下方。例如： ``` <textarea id="oTextarea" rows="10" cols="20">...</textarea> `...
scrollbar的属性及样式分类:css
命由己造，相由心生
05-29 2393
scrollbar的属性及样式分类:css     1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置
div内的scroll局部滚动
听闻青春丶
10-15 2万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ padding: 0;
如何给div添加滚动条
qq_27523025的博客
02-08 1582
">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 width:70px;以上实例表示如果 div 内容的高度大于 300px 就会出现垂直滚动条，小于 300px 就没有滚动条。
div中打开滚动条与设置滚动条位置
暄妍丶的博客
10-22 7631
div中打开滚动条与设置滚动条位置一、给div设置滚动条二、设置滚动条的位置通过锚点跳转设置scrollTop的值 当我们给div设置固定的高度或宽度的时候,超出的内容默认是不显示的.但是我们有将他们显示出来的需求,比如自己做一个,这时候我们就需要给div加上滚动条了 一、给div设置滚动条 我们只需要这么一行css代码 overflow: scroll; 如果我们只想添加高度滚动条,我们可以使用下面的语句 /*设置纵向滚动栏*/ overflow-x: scroll; /*设置横向滚动栏*/ overf
css中怎么给div设置一个从上到下的滚动动画
m0_68094390的博客
05-15 4829
在上面的代码中，scroll-div是需要滚动的div，设置了固定的高度和overflow:hidden属性。然后定义了一个名为scroll的动画，使用translateY()函数实现从上到下的滚动效果。首先，给需要滚动的div设置一个固定的高度和overflow属性为hidden，这样可以隐藏超出高度的内容。在@keyframes中，定义从上到下的滚动动画，可以使用translateY()函数来实现垂直方向的移动。可以使用CSS的动画属性来实现从上到下的滚动动画。
html滚动条 textarea属性设置
12-14
1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。...
textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法
12-13
要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的横向滚动条，在style属性中增加overflow-x属性控制，如下： <textarea id=txtComments style="overflow-x:...
element-textarea,滚动条样式更美观.
Backbody_的博客
03-09 1758
element-textarea,滚动条样式更美观.
qml之TextArea 添加滚动条
chenyijun的专栏
07-31 3019
qml的TextArea是富文本控件，可以显示各种文字，包括图片表情等，如果文本过长，则需要添加滚动条，这样才能方便看到所有的内容。本篇介绍TextArea添加滚动条的一种方式：
HTML滚动条样式代码及使用技巧
热门推荐
前端小白
12-15 3万+
html中滚动条属性设置 scrollbar属性、样式详解 1、 overflow内容溢出时的设置（设定被设定对象是否显示滚动条）     overflow-x水平方向内容溢出时的设置     overflow-y垂直方向内容溢出时的设置     以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2、 scrollbar-3d-light-colo
让DIV的滚动条自动滚动到最底部的3种方法
一枚小趴菜(´▽`)ﾉ
02-20 2万+
方法一： 使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="text/javascript"> function onGetMessage(context) { msg.innerHTML+=context; msg_end.click(); } </script> <div style="width:500px;overflow:auto"> <div
滚动html颜色,DIV 自动滚动功能及滚动条颜色修改的代码
weixin_29691667的博客
06-07 501
废话不多说了，直接给大家贴代码了。具体代码如下所示：1.DIV 自动滚动function startmarquee(lh, speed, delay) {var t;var oHeight = 300; /** div的高度 **/var p = false;var o = document.getElementById("show");var preTop = 0;o.scrollTop = 0...
html滚动条颜色代码,设置div滚动条颜色的css代码
weixin_39653481的博客
06-03 636
这篇文章我们来给大家介绍一下设置p滚动条颜色的css代码。 这里是你要显示的内容 SCROLLBAR-FACE-COLOR(立体滚动条凸出部分的颜色)SCROLLBAR-HIGHLIGHT-COLOR(滚动条空白部分的颜色)滑道SCROLLBAR-ARROW-COLOR(上下按钮上三角箭头的颜色)SCROLLBAR-SHADOW-COLOR(立体滚动条阴影的颜色)SCROLLBAR-BASE-CO...
浏览器滚动条样式
weixin_30757793的博客
02-06 111
::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb）::-webkit-scrollbar-button 滚动条轨...
div上添加scroll监听事件失败的原因
肖帅的博客
01-21 6286
1，问题：在给div添加scroll监听事件时，发现添加失败，即在添加的方法中没有执行要添加方法，如下 document.querySelector('.appMain').addEventListener('scroll',this.handleScroll,true) 2，发现问题 在寻找问题的过程中，使用window添加 scroll 监听事件时可以的，但是在div上添加scroll监听事...
DIV滚动条使用方法
Mr_Von的专栏
06-08 1002
参考核心代码：滚动条相关颜色属性：　　face-color：滑块颜色　　hightlight-color：高亮颜色　　3dlight-color：三维光线颜色　　darkshadow-color：暗影颜色　　shadow-color：阴影颜色　　arrow-color：箭头颜色　　tack-color：滑道颜色　　　　滚动条属性：　　overflow
textarea滚动条
最新发布
07-27
要在HTML中设置textarea的滚动条，可以使用以下代码： <textarea rows="4" cols="50" style="overflow:scroll;"></textarea> 其中，rows和cols属性分别用于设置textarea的行数和列数，style属性中的overflow:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值