设置滚动条样式和placeholder样式

.利。

已于 2024-01-25 15:57:53 修改

阅读量1.1k

点赞数 1

分类专栏： css 文章标签： css css3 html

于 2022-02-11 10:55:30 首次发布

本文链接：https://blog.csdn.net/weixin_41674235/article/details/122875937

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

滚动条样式

 ::-webkit-scrollbar {
    width:4px;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
    background:rgba(255,255,255,0.3);/* 滚动槽背景颜色 */
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
  }
  ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
  }

如果要为某个元素设置滚动条样式

.box::-webkit-scrollbar{
	width:4px;
}
...
//兼容火狐的滚动条样式
.box{
	scrollbar-width: thin;
}

/* 滚动条样式 完整版 */
/* 兼容火狐的滚动条样式 */
 .com-scroll{
    scrollbar-width: thin;
 }
 .com-scroll::-webkit-scrollbar {
    width:4px;
  }
  /* 滚动槽 */
  .com-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.2);
    border-radius:10px;
    background:rgba(0,0,0,0.1);/* 滚动槽背景颜色 */
  }
  /* 滚动条滑块 */
  .com-scroll::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(64,158,255,.5);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
  }
  .com-scroll::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(64,158,255,.5);
  }

placeholder样式

input::placeholder {
    color: #395c7e;
}
//::-webkit-input-placeholder/* WebKit, Blink, Edge */
//:-moz-placeholder/* Mozilla Firefox 4 to 18 */
//::-moz-placeholder  /* Mozilla Firefox 19+ */
//:-ms-input-placeholder /* Internet Explorer 10-11 */
//::-ms-input-placeholder  /* Microsoft Edge */
//示例
input::placeholder {
    color: #395c7e;
}
input::-webkit-input-placeholder{ /*WebKit browsers*/
    color: #395c7e;
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
    color: #395c7e;
}
input::-ms-input-placeholder{ /*Internet Explorer*/
    color: #395c7e;
}