【前端】常用组件的CSS

1. button的样式修改

每个环节有五个不同的状态:link,hover,active,focus和visited.
Link是正常的外观,hover当你鼠标悬停时,active是单击它时的状态,focus跟随活动状态,visited是你在最近点击的链接未聚焦时结束的状态。

1. 纯CSS
   以下为例子，按下后从浅紫到深紫。注意:hover和:active顺序别错！

/* 初始和点击后 */
.btn-xx, btn-xx:visited{
  flex: 1 1 auto;
  background: #b2ade9;
  /*实现水平和垂直居中*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}
/*鼠标移动到*/
.btn-xx:hover{
  background: #b08df1;
}
/*鼠标点击时*/
.btn-xx:active{
  background: #b08df1;
  /*缩小的动效*/
  transition: 0.05s;
  transform: scale(0.9, 0.9);
  -webkit-transform: scale(0.9, 0.9);
  -o-transform: scale(0.9, 0.9);
  -ms-transform: scale(0.9, 0.9);
}

2. checkbox的样式修改

1. 纯CSS
2. ElementUI的el-checkbox

/*  */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner{
    border-color: #20946f !important;
    background-color: #20946f !important;
}
.el-checkbox__inner:hover{
    border-color: #529d84 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #529d84 !important;
}
.el-checkbox{
    color: #111;
    margin-right: 30px;
    font-size: 16px;
    margin-bottom: -1px;
}