首页 > 其他分享 >css自定义滚动条

css自定义滚动条

时间:2023-10-09 14:44:19浏览次数:30  
标签:container 自定义 color 滚动条 scrollbar webkit css

.container {
width: 200px;
height: 150px;
overflow: auto; /* 自动显示滚动条 /
-ms-overflow-style: scrollbar; /
在IE上显示自定义滚动条 */
}

/* 自定义滚动条的样式 */
.container::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.container::-webkit-scrollbar-track {
background-color: #f2f2f2;
}
.container::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}
.container::-webkit-scrollbar-thumb:hover {
background-color: #555;
}

标签:container,自定义,color,滚动条,scrollbar,webkit,css
From: https://www.cnblogs.com/HatcherBlogs/p/17751708.html

相关文章

  • 在线直播源码,CSS磨砂玻璃效果和渐变主题色文字
    在线直播源码,CSS磨砂玻璃效果和渐变主题色文字HTML <divclass="card"> <h2class="gradient"> </h2> <div>  <p>.welcome{</p>  <pclass="indent">"CSDN:lqj_本人"</p>  <pclass="......
  • CSS~等待效果实现
    <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%;margin-top:150px;}.first-loading-wrp.loadin......
  • scss基础
    官网https://www.sass.hk/guide/变量导入SASS文件静默注释混合器选择器继承style选项if指令for循环each循环while条件function函数文件后缀sass有两种后缀名文件:后缀名为sass,不使用大括号和分号后缀名为scss,这种和我们平时写的css文件格式......
  • CSS常用总结
    重置样式html,body,ul,li,a,p,div{padding:0;margin:0;//设置盒模型box-sizing:border-box;//移除移动端特有的点击高亮效果-webkit-tap-highlight-color:transparent;}body{font-family:"PingFangSC","MicrosoftYaHei","Helve......
  • CSS单位
    CSS常用长度单位px:相对长度单位相对于显示器屏幕分辨率rem:相对长度单位对于根元素(即html元素)font-size计算值的倍数html{font-size:14px;那么14px=1rem28px=2rem即:npx=n/14rem}h3{font-size=2rem;//转换为px即是2*12=24px}vw和vh移动端......
  • Vue学习笔记(七):绑定css样式
      1绑定class样式¶vue为HTML绑定css中的class样式是通过v-bind实现的。  1.1绑定单个class¶把需要绑定的样式class名赋值给一遍变量,然后通过变量v-bind绑定class属性,绑定后的class并不会覆盖原来的class属性,而是与原来的class进行叠加。如下所示,d......
  • 【webapp】在 JSP 页面中引入标签库和使用自定义标签
    自定义标签的基本步骤:创建自定义标签库文件:首先,您需要创建一个包含自定义标签定义的标签库文件(通常以 .tld 扩展名结尾)。该文件描述了标签的名称、属性和处理逻辑。引入标签库:在JSP页面中,通过使用 <%@taglib%> 指令来引入自定义标签库。该指令告诉JSP引擎在页面中......
  • 使用postcss-px-to-viewport实现兼容
    为提高页面的兼容性,可使用postcss-px-to-viewport。1.安装依赖"postcss-px-to-viewport":"^1.1.1"2.在vite.config.js导入importpostcssPxToViewportfrom'postcss-px-to-viewport';3.增加css配置,示例如下returndefineConfig({plugins:[vue(),buildTi......
  • TinyMCE——自定义工具栏按钮(基础按钮、下拉框按钮、弹框按钮等)
    详细配置查看官方文档:https://www.tiny.cloud/docs/tinymce/6/custom-toolbarbuttons/  配置方式:tinymce.init({selector:'#editor',toolbar:'myCustomToolbarButton',setup:(editor)=>{editor.ui.registry.addButton('myCustomToolb......
  • css - 脱离文档流
    CSSposition定位&z-index层级1.定位position:(1).相对定位relative:元素相对定位:a.相对于元素在文档流中原本的位置定位的b.不脱离文档流c.如果不设置偏移量,元素不会发生任何变化不改变元素性质(块级/内联元素)(2).绝对定位absolute:绝对定位的元素:a.相对于最近开启......