全部产品

PC网页自定义前端组件样式

更新时间:2020-11-20 11:02:47

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

注意

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

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

  • 正常情况

    正常情况

  • 异常情况

    异常情况

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

.nc_scale {
    background: #e8e8e8; /* 默认背景色 */
}
.nc_scale .scale_text {
    color: #9c9c9c; /* 默认字体颜色 */
}
.nc_scale div.nc_bg {
    background: #7ac23c; /* 滑过时的背景色 */
}
.nc_scale .scale_text2 {
    color: #fff; /* 滑过时的字体颜色 */
}
.nc_scale span {
    border: 1px solid #ccc;
    background: #fff url("//g.alicdn.com/sd/ncpc/images/rt.png") no-repeat center;
}
.nc_scale .btnok {
    background: #fff url("//g.alicdn.com/sd/ncpc/images/yes.png") no-repeat center;
}
.errloading {
    border: #faf1d5 1px solid;
    background: url("//g.alicdn.com/sd/ncpc/images/no.png") #fffff0 no-repeat 10px 9px;
    color: #ef9f06;
}		

滑动组件流程