前端CSS3一些默认样式修改及处理小技巧

1.滚动条设置,通用场景(overflow:auto/scroll)

less中可以设置局部作用域,如果设置在body,则整个页面滚动条设置都是此属性。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
        ::-webkit-scrollbar  
        {  
            width: 2px;   // 滚动条宽度,设置为0,则隐藏滚动条,滚动效果存在。
            height: 16px;  
            background-color: rgba(0,0,0,0);  
        }  
          
        /*定义滚动条轨道 内阴影+圆角*/  
        ::-webkit-scrollbar-track  
        {  
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
            border-radius: 5px;  
            background-color: rgba(248,248,248,0.2);   // 滚动条整个背景色
        }  
          
        /*定义滑块 内阴影+圆角*/  
        ::-webkit-scrollbar-thumb  
        {  
            border-radius: 5px;  
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
            background-color: @background-gray;   // 滚动条色
        }  

2.文字超出宽度之后,用省略号表示。

                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;

3.input输入框pc端聚焦之后去除默认效果

        input   {
                            outline:none;
                            text-indent: 40px;
                            &:hover {
                                border: none;
                                box-shadow: none; 
                            }
                            &:focus {
                                border: none;
                                box-shadow: none; 
                            }
                            &:input {
                                border: none;
                                box-shadow: none; 
                            }
                        }

效果如图

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • Ba la la la ~ 读者朋友们,你们好啊,又到了冷锋时间,话不多说,发车! 一、line-hei...
    王饱饱阅读 583评论 0 1
  • 移动端样式小技巧 原文https://segmentfault.com/a/1190000006237977 平时...
    BABLOVE阅读 378评论 0 1
  • 在交友方面,本人真是大写加粗的被动。今天你和我认识了,咱俩关系的下一步发展基本靠你,回想自己现在关系最稳的...
    你的茹哥阅读 443评论 0 0