其中设置滚动条的组成都有以下部分

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
  • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

然后:

效果图:

代码:

<div class="box1">
  <textarea name id cols="30" rows="10"></textarea>
</div>
<style>
  .box1>textarea {
    height: 4rem;
    width: 12%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #244b6d;
    resize: none;
    color: black;
    font-size: 24px
  }
  /* 滚动条框设置 */
  .box1>textarea::-webkit-scrollbar {
    width: 12px;
    background-color: rgb(182, 214, 226);
  }
  /* 滚动条的设置 */
  .box1>textarea::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: skyblue;
  }
</style>

如何在textarea多行文本框中设置滚动条样式的更多相关文章

  1. vue中修改滚动条样式

    这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...

  2. 在css中定义滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  3. CSS——textarea多行文本框禁止拖动问题解决

    文本框这样配置就好 textarea{ resize:none; }

  4. textarea多行文本框自适应高度

    <script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script> <scr ...

  5. 如何在AD6(altium designer 6.x)中设置PCB大小

    做一块板子,体积比较的大(长度有20CM),而AD默认的长度只有15cm,满足不了本人要求.在网上找到了解决方法: 先在Mechanical(机械层,如Mechanical1)下绘制一个板框,也就是你 ...

  6. 记住密码, 不需要默认填写的input框中设置 autocomplete="new-password"

  7. CSS中设置字体样式

    <style type="text/css"> body{ font-family: SimHei,"微软雅黑",sans-serif; } < ...

  8. div中设置滚动条的问题

    <div srtle="width:100px;height:50px;"></div> 这样的一个div,当文本超出的时候我们就会设: overflow: ...

  9. 项目中 -- 设置tabBar样式 (旅游局)

    - (void)addChildViewController:(UIViewController *)ViewController image:(UIImage *)image selectImg:( ...

随机推荐

  1. 作业:分布式文件系统HDFS 练习

    这个作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3292. 利用Shell命令与HDFS进行交互 1.目录操作 H ...

  2. Spring Cloud Eureka源码分析 --- client 注册流程

    Eureka Client 是一个Java 客户端,用于简化与Eureka Server的交互,客户端同时也具备一个内置的.使用轮询负载算法的负载均衡器. 在应用启动后,将会向Eureka Serve ...

  3. RecyclerView 实现快速滚动

    RecyclerView 实现快速滚动 https://www.cnblogs.com/mamamia/p/8311449.html

  4. Springboot单元测试Junit深度实践

    Springboot单元测试Junit深度实践 前言 单元测试的好处估计大家也都知道了,但是大家可以发现在国内IT公司中真正推行单测的很少很少,一些大厂大部分也只是在核心产品推广单测来保障质量,今天这 ...

  5. android 连接蓝牙打印机 BluetoothAdapter

    android 连接蓝牙打印机 BluetoothAdapter 源码下载地址:https://github.com/yylxy/BluetoothText.git public class Prin ...

  6. [转]JS - Promise使用详解2(ES6中的Promise)

    原文地址:https://www.hangge.com/blog/cache/detail_1638.html 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.其中  ...

  7. C++实现委托机制(三)——lambda表达式封装

    C++.引言:              其实原本没打算写这一章的,不过最后想了想,嗯还是把lambda表达式也一并封装进去,让这个委托也适应lambda表达式的注册.不过在之前还是需要先了解lamb ...

  8. Kafka在zookeeper中存储结构和查看方式

    Zookeeper 主要用来跟踪Kafka 集群中的节点状态, 以及Kafka Topic, message 等等其他信息. 同时, Kafka 依赖于Zookeeper, 没有Zookeeper 是 ...

  9. 本地dev环境,运行时用node模块自动读取并整合文件

    const http = require('http'); const fs = require('fs'); const path = require('path'); const glob = r ...

  10. vuex 的基本使用

    工程目录 主要关注store 文件夹下的文件 store/index.js import Vue from 'vue' import Vuex from 'vuex' // import getter ...