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;
      } 

  • 相关阅读:
    (第七周)评论alpha发布
    (第六周)工作总结
    (第六周)团队项目6
    (第六周)团队项目5
    (第六周)团队项目4
    (第六周)团队项目燃尽图
    (第六周)团队项目3
    (第六周)课上Scrum站立会议演示
    Java第二次作业第五题
    Java第二次作业第四题
  • 原文地址:https://www.cnblogs.com/sklhtml/p/9361800.html
Copyright © 2011-2022 走看看