溫馨提示×

textarea的滾動條如何自定義

小樊
293
2024-06-17 20:49:03
欄目: 編程語言

要自定義textarea的滾動條樣式，可以使用CSS的偽元素和屬性來實現(xiàn)。以下是一個簡單的示例：

<!DOCTYPE html>
<html>
<head>
<style>
    .custom-scrollbar {
        width: 300px;
        height: 200px;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #333333 #f0f0f0;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
        width: 10px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #333333;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background-color: #f0f0f0;
    }
</style>
</head>
<body>

<textarea class="custom-scrollbar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies vehicula libero, id tristique justo. Quisque porta lacinia nulla, nec ultricies nunc eleifend nec. Integer nec hendrerit dui. Mauris dictum, purus a lacinia congue, elit elit vehicula tellus, sed tempus purus sem et ante.
</textarea>

</body>
</html>

在上面的示例中，我們定義了一個帶有自定義滾動條樣式的textarea。我們設(shè)置了滾動條的寬度和顏色，以及滾動條滑塊和軌道的背景顏色。使用這些樣式，可以根據(jù)需要自定義textarea的滾動條樣式。請注意，不同瀏覽器可能對滾動條的樣式支持有所不同，因此需要進行適當(dāng)?shù)臑g覽器測試。

0 踩