zoukankan      html  css  js  c++  java
  • 关于前端滚动条,input框等样式的修改

    1.改变滚动条的样式

    .orderList::-webkit-scrollbar {/*滚动条整体样式*/
    4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    }
    .orderList::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
    }
    .orderList::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
    }

    2.消除input的默认样式

      input, button, select, textarea {
        outline: none;
        -webkit-appearance: none;
        border-radius: 0;
      }

    3.改变input,textarea的placeholder的样式

      input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
        color: #fff; 

        font-size:16px;
      } 
      input:-moz-placeholder, textarea:-moz-placeholder { 
        color: #fff; 

        font-size:16px;

      } 
      input::-moz-placeholder, textarea::-moz-placeholder { 
        color: #fff; 

        font-size:16px;
      } 
      input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
        color: #fff; 

        font-size:16px;
      } 

  • 相关阅读:
    人事面试13
    人事面试测试篇1
    人事面试16
    人事面试15
    人事面试测试篇3
    人事面试测试篇2
    人事面试14
    Oracle Compile 编译 无效对象
    Oracle 移动数据文件的操作方法
    Oracle 9i 从9.2.0.1升级到 9.2.0.6 步骤
  • 原文地址:https://www.cnblogs.com/sklhtml/p/9361800.html
Copyright © 2011-2022 走看看