CSS设置自定义滚动条样式(兼容IE)

话不多说,直接看样式:(亲测 ie浏览器兼容)

.conversion_code{
		overflow-x: scroll;
		overflow-y: hidden;
		width: 152px;
		height: 30px;
		font-size: 12px;
		font-weight: 400;
		text-align: center;
		line-height: 32px;
		letter-spacing: 0;
	}
	.conversion_code{
		/*IE无法设置浏览器的宽度、高度,只能隐藏,并不影响滑动*/
		-ms-scroll-chaining: chained;
		-ms-overflow-style: none;
		-ms-content-zooming: zoom;
		-ms-scroll-rails: none;
		-ms-content-zoom-limit-min: 100%;
		-ms-content-zoom-limit-max: 500%;
		-ms-scroll-snap-type: proximity;
		-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
		-ms-overflow-style: none;
		/*滚动条滑块按钮的颜色*/
		scrollbar-face-color: #37C5E6;
		/*滚动条整体颜色*/
		scrollbar-highlight-color: #37C5E6;
		/*滚动条轨道颜色*/
		scrollbar-track-color: #42BCEE;
		/*三角箭头的颜色*/
		scrollbar-arrow-color: #fff;
		/*滚动条阴影*/
		scrollbar-shadow-color: #37C5E6;
		/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
		scrollbar-3dlight-color:#37C5E6;
		/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
		scrollbar-darkshadow-color: #37C5E6;
		/*滚动条基准颜色*/
		scrollbar-base-color: #37C5E6;
	}
	/* -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性  滚动条整体部分,可以设置宽度等*/
	.conversion_code::-webkit-scrollbar{
	  background-color: #37C5E6;
	  width:5px;
	  height:2px;
	}
	/*滚动条的轨道*/
	.conversion_code::-webkit-scrollbar-track{
	  background-color: #37C5E6;
	  border-radius: 10px;
	}
	/*滚动条的滑块按钮*/
	.conversion_code::-webkit-scrollbar-thumb{
	  border-radius: 10px;
	  background-color: #42BCEE;
	}

 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值