溫馨提示×

textarea滾動條怎么實現

小億
733
2023-06-03 11:55:55
欄目: 編程語言

可以通過CSS樣式來實現textarea滾動條的樣式,具體實現如下:

  1. 首先給textarea添加樣式overflow: auto,這樣在textarea內容超過容器高度時會出現滾動條。

  2. 接著通過CSS偽類選擇器來設置滾動條的樣式,比如:

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-thumb {

background-color: #ccc;

border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

background-color: #aaa;

}

上述代碼中,第一個偽類選擇器設置滾動條的寬度,第二個偽類選擇器設置滾動條的背景色和圓角,第三個偽類選擇器設置鼠標懸停時的背景色。

  1. 最后,將上述樣式應用到textarea上即可實現滾動條的樣式。

完整代碼示例:

textarea {

overflow: auto;

}

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-thumb {

background-color: #ccc;

border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

background-color: #aaa;

}

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女