html捲軸 textarea屬性設定_HTML/Xhtml_網頁製作

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.讓瀏覽器視窗永遠不會出現捲軸
沒有水平滾動條

複製程式碼

程式碼如下:

程式碼如下:

沒有垂直滾動條

複製代碼

程式碼如下:

沒有捲軸

複製程式碼

程式碼如下:

或


2.設定多行文字方塊的捲軸

沒有水平捲軸

複製程式碼

程式碼如下:

<br> <div class="msgheader"><div class="right">沒有垂直捲軸<span style="CURSOR: pointer" onclick="copycode(getid('phpcode134'));"><u></u></span> </div></div>複製程式碼<div class="msgborder" id="phpcode134"> <br><br>程式碼如下:</div> <br><br><br>程式碼如下:<div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode135'));"><u>程式碼如下:</u></span></div></div>程式碼如下:<div class="msgborder" id="phpcode135"> <br><br><br>程式碼如下:</div> <br><strong></strong>程式碼如下:<br><br> <br><br><br>沒有捲軸<div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode136'));"><u></u></span>複製程式碼</div></div> <div class="msgborder" id="phpcode136"> <br>複製程式碼<br> </div> <br>代碼如下:<strong></strong> <br><textarea style="overflow-x:hidden;overflow-y:hidden"> <br>或 <div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode137'));"><u>3.設定視窗滾動條的顏色</u> </span>設定視窗滾動條的顏色為紅色 </div>scrollbar-base-color設定的是基本色，一般情況下只需要設定此屬性就可以達到改變捲軸顏色的目的。 </div>加上一點特別的效果： <div class="msgborder" id="phpcode137"> <br><br><br><br> </div>複製代碼<br><br><br>代碼如下:<div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode138'));"> <u></u></span> </div>4.在樣式表檔中定義好一個類，呼叫樣式表</div> <div class="msgborder" id="phpcode138"> <br><br> </div> <br><br>複製代碼<br><div class="msgheader"> <div class="right">代碼如下:<span style="CURSOR: pointer" onclick="copycode(getid('phpcode139'));"><u> </u>代碼如下:</span> </div> <div class="msgborder" id="phpcode139"> <br><br>這樣調用： </div>複製程式碼程式碼如下: <textarea class="coolscrollbar"> <textarea class="coolscrollbar"> textarea顏色及邊框設定：複製程式碼程式碼如下: 程式碼如下：<textaa style="border:red solid;border-width:1 1 1 1;color:#CCCCCC;"> </textaa>