改变checkbox，滚动条样式

最新推荐文章于 2024-06-20 16:56:39 发布

Luckyoye

最新推荐文章于 2024-06-20 16:56:39 发布

阅读量394

点赞数

分类专栏： react vue

本文链接：https://blog.csdn.net/Luckyoye/article/details/126673644

版权

CSS样式 checkbox替换 label样式滚动条美化视觉效果

关键词由CSDN通过智能技术生成

react 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

改变checkbox样式

样式如图

// html部分

  <input type="checkbox" checked id="weather">
    <label for="weather"></label>
    <label>111</label>


// 改变checkbox样式
         //隐藏原来的input
        input[type=checkbox] {
          visibility: hidden;
        }
        //+选择器表示选中相邻的label，代替原来的input
        #weather+label {
          display: block;
          width: 15px;
          height: 15px;
          cursor: pointer;
          position: absolute;
          top: 10px;
          left: 10px;
          background: rgba(21, 60, 110, 1);
          border: 1px solid rgba(1, 177, 255, 1);
        }
        //当input框为选中状态时，lable标签的样式，其中在css选择时，“：”表示当前input框的值，即checked；
        #weather:checked+label::before {
          display: block;
          content: "\2713";//对号的大小
          text-align: center;
          font-size: 14px;
          color: white;
          position: absolute;
          top: -8px;
          left: 3px;
        }

改变滚动条样式

// An highlighted block
 ::-webkit-scrollbar {
        width: 0.3vw;
        height: 1px;
      }
  
      ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #27a1ff;
      }
  
      ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: RGBA(14, 22, 34, 0.01);
      }