Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 html中去掉textarea右侧滚动条和右下角拖拽

html中去掉textarea右侧滚动条和右下角拖拽

发布时间:2020-05-08   编辑:www.jquerycn.cn
jquery中文网为您提供html中去掉textarea右侧滚动条和右下角拖拽等资源,欢迎您收藏本站,我们将为您提供最新的html中去掉textarea右侧滚动条和右下角拖拽资源
textarea的属性是可以在内容过长有滚动条,在高版本的浏览器中还可以拖大输入框了,那么我们下文的重点就为各位介绍textarea去掉右侧滚动条和右下角拖拽的方法,具体如下。

我们经常会把去掉html页面的滚动条了,通常如下

掉左右滚动条,保留上下滚动条:<body style="overflow-x:hidden;overflow-y:auto;">

如果页面头部有:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

需要去掉该代码,或者改为:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

结果发现不能在textara中使用,找了一段css

body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

测试发现也无效了,那么要怎么才可以去掉textarea右侧滚动条和右下角拖拽

在使用表单中的textarea标签时,有以下需要注意的地方:

1、去掉右侧滚动条:

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

2、去掉右下角的拖拽标记:

<textarea  style= "resize:none; "> </textarea>

解释:HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局,使页面变得不美观。可以通过添加如下两个样式禁用拖动,固定大小:


补充:隐藏textarea的滚动条

要设置textarea文本域的滚动条是否开启,使用style.overflow-x属性来控制。如:如果要隐藏该文本域的横向滚动条,在style属性中增加overflow-x属性控制,如下:
<textarea id=txtComments style="overflow-x:hidden"></textarea>
相应的,若要隐藏纵向滚动条:
<textarea id=txtComments style="overflow-y:hidden"></textarea>
如果使用代码控制的话,可能需要如下代码实现:
document.all("txtComments").style.overflowX="hidden";
overflow-x,overflow-y的可取值为:visible(默认取值),hidden,auto,scroll。
visible:始终不显示滚动条,文本区域的大小会根据内容的增加,自动增长,以显示全部内容。
scroll:不管文本区域里的内容有多少,始终显示滚动条。
hidden:始终不显示滚动条,内容超出层面的对象是不显示。
auto:如果内容在文本区域内可以全部显示,滚动条不显示,当内容无法全部显示时,内容被截断,加上滚动条显示所有内容。

您可能感兴趣的文章:
如何使用jQuery Draggable和Droppable实现拖拽功能
jQuery时间表插件 Timeglider
jQuery 位置插件
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
jquery 插件 任意位置浮动固定层
jQuery右侧导航插件 Flexible Nav
为开发者准备的10款最好的jQuery日历插件
jquery.ui.draggable中文文档(原文翻译)
基于jquery的跟随屏幕滚动代码
jQuery创建平滑的页面滚动(顶部或底部)

[关闭]