WebApp Development-Icon Switch

Html

<Divclass= "Bg_fff Step"ng-if= "Ifshowkh! = ' 1 '"><ulclass= "Row Step_icon3"ID= "Step_icon3">    <Liclass= "Item Step_type_1_off"></Li>    <Divclass= "line col-20"></Div>    <Liclass= "Item step_type_2_on"></Li>    <Divclass= "line col-20"></Div>    <Liclass= "Item Step3_type_3_off"></Li></ul><ulclass= "Row step_desc3"ID= "STEP_DESC3">    <Liclass= "Item Col-30">Basic information</Li>    <Liclass= "Item Col-30">Request Information</Li>    <Liclass= "Item Col-30">Image upload</Li></ul></Div>

View Code

<Divclass= "Bg_fff Step"ng-if= "ifshowkh== ' 1 '"><ulclass= "Row Step_icon4"ID= "Step_icon4">    <Liclass= "Item"></Li>    <Divclass= "line col-15"></Div>    <Liclass= "Item"></Li>    <Divclass= "line col-15"></Div>    <Liclass= "Item"></Li>    <Divclass= "line col-15"></Div>    <Liclass= "Item Col-5"></Li></ul><ulclass= "Row Step_desc4"ID= "STEP_DESC4">    <Liclass= "Item col-25">Basic information</Li>    <Liclass= "Item col-25">Request Information</Li>    <Liclass= "Item col-25">Additional Information</Li>    <Liclass= "Item col-25">Image upload</Li></ul>

View Code

css1.0

/*Step_icon4*/. Step_icon4{padding:20px;}. Step_icon4 Div.line{    }. Line{width:80px;Border-top:1px solid #0076C1;Margin-top:20px;}. Step_icon4 Li.item{width:30%;Height:40px;text-align:Center;Padding-top:10px;}. Step_icon4 li.item:nth-of-type (1){background:URL (.. /img/find_pw_on_1.png) No-repeat Center Right;background-size:27px Auto;}. Step_icon4 Li.item:nth-of-type (2){background:URL (.. /img/find_pw_off_2.png) No-repeat Center Center;background-size:27px Auto;}. Step_icon4 Li.item:nth-of-type (3){background:URL (.. /img/icon_s3.png) No-repeat Center Center;background-size:27px Auto;}. Step_icon4 Li.item:nth-of-type (4){background:URL (.. /img/icon_s4.png) No-repeat Center left;background-size:27px Auto;}. STEP_DESC4{    }. STEP_DESC4 Li.item{Font:Inherit;font-size:100%;padding:0px;Height:32px;Line-height:32px; }

View Code

CSS2.0

/*step on/off*/. step_type_1_on{background:URL (.. /img/find_pw_on_1.png) No-repeat Center right!important;background-size:27px Auto!important;}. Step_type_1_off{background:URL (.. /img/find_pw_off_1.png) No-repeat Center right!important;background-size:27px Auto!important;}. step_type_2_on{background:URL (.. /img/find_pw_on_2.png) No-repeat Center Center!important;background-size:27px Auto!important;}. Step_type_2_off{background:URL (.. /img/find_pw_off_2.png) No-repeat Center Center!important;background-size:27px Auto!important;}. step_type_3_on{background:URL (.. /img/icon_s1-3.png) No-repeat Center Center!important;background-size:27px Auto!important;}. Step_type_3_off{background:URL (.. /img/icon_s3.png) No-repeat Center Center!important;background-size:27px Auto!important;}. step_type_4_on{background:URL (.. /img/icon_s1-4.png) No-repeat Center right!important;background-size:27px Auto;}. Step_type_4_off{background:URL (.. /img/icon_s4.png) No-repeat Center right!important;background-size:27px Auto;}/*group2*/. step3_type_1_on{background:URL (.. /img/find_pw_on_1.png) No-repeat Center right!important;background-size:27px Auto!important;}. Step3_type_1_off{background:URL (.. /img/find_pw_off_1.png) No-repeat Center right!important;background-size:27px Auto!important;}. step3_type_2_on{background:URL (.. /img/find_pw_on_2.png) No-repeat Center Center!important;background-size:27px Auto!important;}. Step3_type_2_off{background:URL (.. /img/find_pw_off_2.png) No-repeat Center Center!important;background-size:27px Auto!important;}. step3_type_3_on{background:URL (.. /img/icon_s1-3.png) No-repeat Center left!important;background-size:27px Auto!important;}. Step3_type_3_off{background:URL (.. /img/icon_s3.png) No-repeat Center left!important;background-size:27px Auto!important;}

WebApp Development-Icon Switch