前端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