在一次开发在线聊天室时,发表内容使用textarea标签,但是当文字过多时,原生的滚动条实在太难看了。
<div class="content">
<textarea ref="input" v-model="content" autocomplete="off" class="input" rows="4"></textarea>
</div>
加入以下样式就好了。其他div等等的滚动条按此样式应该也可以更改(没试过)。
.input::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.input::-webkit-scrollbar-thumb {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #c3c3c3;
}
.input::-webkit-scrollbar-track {
background-color: transparent;
}
样式如下: