全部产品
云市场

自定义前端组件样式

更新时间:2019-06-13 14:51:05

您可以通过自定义CSS样式的方式来调整滑动验证各个UI组件的颜色、资源等。

注意:自定义样式需要出现在滑动验证默认样式的后方,必要时可添加!important标识。

滑动验证在HTML5环境下的Dom结构共分为两种stage状态:stage1(初始状态)、stage3(拦截状态)。其中,{prefix} 为前缀,取值的形式为nc_1、nc_2…。

Dom结构

stage1(初始状态)的CSS样式

stage1的CSS定义

您可以修改CSS文件中的以下设置,调整stage1(初始状态)的滑动验证组件样式:

  1. /* 滑动条高度、边框、背景色等 */
  2. ._nc .stage1 .slider {
  3. height: 52px;
  4. border-radius: 26px;
  5. box-shadow: 0 0 3px #999;
  6. background-color: #ddd;
  7. }
  8. /* 滑动条 */
  9. ._nc .stage1 .track div {
  10. border-radius: 26px;
  11. color: #fff;
  12. }
  13. /* 滑动条背景色-正常 */
  14. ._nc .stage1 .bg-green {
  15. background-color: #78c430;
  16. }
  17. /* 滑动条背景色-失败 */
  18. ._nc .stage1 .bg-red {
  19. background-color: #ff5500;
  20. }
  21. /* 各个状态的icon */
  22. 等待滑动:"icon iconfont icon-slide-arrow"
  23. 验证出错:"icon no iconfont icon-close"
  24. 验证通过:"icon yes iconfont icon-ok"

stage3(拦截状态)的CSS样式

stage3的CSS定义

您可以修改CSS文件中的以下设置,调整stage3(拦截状态)的滑动验证组件样式:

  1. ._nc .stage3 .title {
  2. font-size: 20px;
  3. color: #777;
  4. width: 100%;
  5. }
  6. /* 图标 */
  7. ._nc .icon {
  8. width: 32px;
  9. height: 32px;
  10. background-image: url("//g.alicdn.com/sd/nch5/icons.png?v=2");
  11. }
  12. ._nc .stage3 .menu.refresh .icon {
  13. background-position: -128px 0;
  14. }
  15. ._nc .stage3 .menu.feedback .icon {
  16. background-position: -160px 0;
  17. }
  18. /* 刷新链接 */
  19. ._nc .stage3 .menu.refresh {
  20. border-right: 2px solid #ccc;
  21. }