PC端小结

游览器滚动条样式

• 设置滚动条样式

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar
  {
    width: 4px;
    height: 4px;
    background-color: #F5F5F5;
  }
  
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #FFF;
  }
  
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #AAA;
  }

• 隐藏滚动条

  .noscrollbar {
  	-ms-overflow-style: none;
  	overflow: -moz-scrollbars-none;
  }
  .noscrollbar::-webkit-scrollbar { width: 0 !important;}

• 滚动条hover效果，移入时才显示

  /* 定义一个鼠标移入才显示滚动条的类 */
  .hover-scroll::-webkit-scrollbar,
  .hover-scroll::-webkit-scrollbar-track,
  .hover-scroll::-webkit-scrollbar-thumb {
    visibility: hidden;
  }
  .hover-scroll:hover::-webkit-scrollbar,
  .hover-scroll:hover::-webkit-scrollbar-track,
  .hover-scroll:hover::-webkit-scrollbar-thumb {
    visibility: visible;
  }

文件上传

input文件上传过滤只显示文本相关文件，设置accept="application/*"

赏

谢谢你请我吃糖

支付宝

微信

• 本文作者： MR-QXJ
• 本文链接： https://mr-qxj.github.io/2020/01/30/游览器/PC端/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！