Jquery中文網 www.4271936.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 html中去掉textarea右側滾動條和右下角拖拽

html中去掉textarea右側滾動條和右下角拖拽

發布時間:2020-05-08   編輯:www.4271936.live
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渲染的效果不同,可以拖動右下角圖標改變大小。但是過分拖動大小會影響頁面布局,使頁面變得不美觀??梢酝ㄟ^添加如下兩個樣式禁用拖動,固定大?。?/p>


補充:隱藏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創建平滑的頁面滾動(頂部或底部)

[關閉]
微信下载APP完成任务如何赚钱 11选5无死角每期必中 浙江6+1体彩 快乐赛车投 股票分析师报考条件 幸运赛车开奖结果查询 河南11选五5玩法介绍 外汇理财是传销吗 平特一肖加6计算公式 股票投资指导 什么影响股票涨跌