全部产品

HTML5自定义前端组件样式

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

注意

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

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

stage1(初始状态)的CSS样式

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

/* 滑动条高度、边框、背景色等 */
._nc .stage1 .slider {
    height: 52px;
    border-radius: 26px;
    box-shadow: 0 0 3px #999;
    background-color: #ddd;
}
/* 滑动条 */
._nc .stage1 .track div {
    border-radius: 26px;
    color: #fff;
}
/* 滑动条背景色-正常 */
._nc .stage1 .bg-green {
    background-color: #78c430;
}
/* 滑动条背景色-失败 */
._nc .stage1 .bg-red {
    background-color: #ff5500;
}
/* 各个状态的icon */
等待滑动:"icon iconfont icon-slide-arrow"
验证出错:"icon no iconfont icon-close"
验证通过:"icon yes iconfont icon-ok"

stage3(拦截状态)的CSS样式

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

._nc .stage3 .title {
    font-size: 20px;
    color: #777;
    width: 100%;
}
/* 图标 */
._nc .icon {
    width: 32px;
    height: 32px;
    background-image: url("//g.alicdn.com/sd/nch5/icons.png?v=2");
}
._nc .stage3 .menu.refresh .icon {
    background-position: -128px 0;
}
._nc .stage3 .menu.feedback .icon {
    background-position: -160px 0;
}
/* 刷新链接 */
._nc .stage3 .menu.refresh {
    border-right: 2px solid #ccc;
}