【前端】常用组件的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;
}