修改滚动条

css3修改滚动条的样式

修改某个div的滚动条默认样式：

#search-list::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: #F5F5F5;
}

#search-list::-webkit-scrollbar
{
	width: 14px;
	background-color: #F5F5F5;
}

#search-list::-webkit-scrollbar-thumb
{
	border-radius: 12px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

滚动条组成

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
• ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  简洁版样式：

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 16px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}  

父级元素不需要宽度居中：
div{
display: box;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}


修改复选框原生样式
input{
    vertical-align: middle;
    width: 15px;
    height: 15px;
}
input[type="checkbox"]{
    border: 2px solid $lenovo-blue !important;
    -webkit-appearance: none;
    cursor: pointer;
    background: #fff;
}
input[type="checkbox"]:checked {
    background-image: url("../images/down-sj.png") ;
    background-position: 0 center;
    background-repeat: no-repeat;
}

原网址：http://blog.youkuaiyun.com/hanshileiai/article/details/40398177

合理使用：flex:

• 父元素使用：display：flex，可使子元素一行显示
• 子元素使用：flex：1 是平均分割父元素，每个子元素占一份
• 垂直显示：中间main会自动伸缩