如何修改滚动条的样式更为美观?比如textarea的滚动条。

    在一次开发在线聊天室时,发表内容使用textarea标签,但是当文字过多时,原生的滚动条实在太难看了。

<div class="content">
          <textarea ref="input" v-model="content" autocomplete="off" class="input" rows="4"></textarea>
</div>

如何修改滚动条的样式更为美观?比如textarea的滚动条。_第1张图片
    加入以下样式就好了。其他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;
}

样式如下:
如何修改滚动条的样式更为美观?比如textarea的滚动条。_第2张图片

你可能感兴趣的:(css,html)