简体   繁体   中英

setting background color to white makes line in progress bar invisible

My form looks like this: 在此处输入图像描述

After setting container to:

<div class="container" style="background:white;">

在此处输入图像描述

How i can make it on white and this progress bar line visible?

CSS: 

    https://pastebin.com/0hnUjRm7

HTML: 

    https://pastebin.com/Wc2zWkiJ

Do you have any ideas?

Add css file in #progressbar li property to z-index: 1; like this;

#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 20%;
    float: left;
    position: relative;
    font-weight: 400;
    z-index: 1;
}

Just change this classes

#progressbar li:after {
    content: '';
    width: 100%;
    height: 5px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
}

#progressbar #step1:before {
    content: "✓";
    position:relative;
    z-index:1;
}

#progressbar #step2:before {
    content: "✓";
    position:relative;
    z-index:1;
}

#progressbar #step3:before {
    content: "✓";
    position:relative;
    z-index:1;
}

#progressbar #step4:before {
    content: "✓";
    position:relative;
    z-index:1;
}

#progressbar #step5:before {
    content: "✓";
    position:relative;
    z-index:1;
}

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM