全部产品
云市场

自定义前端组件样式

更新时间:2019-06-27 14:06:49

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

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

滑动验证在PC端Web页面环境下的Dom结构分为两种:

  • 正常情况

    正常情况DOM结构

  • 异常情况

    异常情况DOM结构

您可以修改CSS文件中的以下设置,调整滑动验证组件样式:

  1. .nc_scale {
  2. background: #e8e8e8; /* 默认背景色 */
  3. }
  4. .nc_scale .scale_text {
  5. color: #9c9c9c; /* 默认字体颜色 */
  6. }
  7. .nc_scale div.nc_bg {
  8. background: #7ac23c; /* 滑过时的背景色 */
  9. }
  10. .nc_scale .scale_text2 {
  11. color: #fff; /* 滑过时的字体颜色 */
  12. }
  13. .nc_scale span {
  14. border: 1px solid #ccc;
  15. background: #fff url("//g.alicdn.com/sd/ncpc/images/rt.png") no-repeat center;
  16. }
  17. .nc_scale .btnok {
  18. background: #fff url("//g.alicdn.com/sd/ncpc/images/yes.png") no-repeat center;
  19. }
  20. .errloading {
  21. border: #faf1d5 1px solid;
  22. background: url("//g.alicdn.com/sd/ncpc/images/no.png") #fffff0 no-repeat 10px 9px;
  23. color: #ef9f06;
  24. }

自定义CSS样式