vue修改默认滚动条样式

关于默认滚动条样式太丑这件事儿

<template>
    <div class="init">
        <el-row class="title">
            <p>我是标题</p>
        </el-row>
        <el-row class="msg">
          <textarea class="statement" readonly>{{ msg }}</textarea>
        </el-row>
    </div>
</template>

我这个用的textarea {{ msg }} 虽然能实现 但看起来怪怪的 代码里还给我标红波浪线了
后来查了一下子 说是不能这么写 得用v-model

<template>
    <div class="init">
        <el-row class="title">
            <p>我是标题</p>
        </el-row>
        <el-row class="msg">
          <textarea class="statement" readonly v-model="msg"></textarea>
        </el-row>
    </div>
</template>

css样式

<style scoped>
    .statement {
      width: 1180px;
      height: 575px;
      overflow: auto;
      margin: 50px 50px 30px;
      line-height: 41px;
      font-size: 22px;
      text-align: justify;
      text-indent: 48px;
      border: none;
      resize: none;
      outline: none;
      font-family: Avenir,Helvetica,Arial,sans-serif;
    }

    .statement::-webkit-scrollbar {
      width: 4px;    
    }

    .statement::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,0.2);
    }

    .statement::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
      background: rgba(0,0,0,0.1);
    }
</style>