Here's how my form appears: https://i.sstatic.net/jXCxm.jpg
Once I set the container to be:
<div class="container" style="background:white;">
https://i.sstatic.net/DZjAK.png
I want to make it white and ensure that the progress bar is visible. Any suggestions on how to achieve this?
CSS:
https://pastebin.com/0hnUjRm7
HTML:
https://pastebin.com/Wc2zWkiJ
Any ideas or advice you could offer would be greatly appreciated.
To incorporate a css file into the #progressbar li property, add z-index: 1; as shown below:
#progressbar li {
list-style-type: none;
font-size: 15px;
width: 20%;
float: left;
position: relative;
font-weight: 400;
z-index: 1;
}
Just update these 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;
}
I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...
Currently working on a website and have incorporated Nivo Slider to develop a jQuery slider. Encountering an issue with the bullets that indicate which slide the user is currently viewing. I'd like these bullets to be displayed on the images within t ...
Hello there, I require assistance with aligning some images in the center of my Prestashop webpage. I am specifically struggling with aligning 3 circular images at the bottom of the page (not social icons). I cannot figure out how to properly center these ...
I'm struggling to remove the white box underneath the "features" section on this website (). The structure of the div is quite simple: <div class="donatenew"></div> and here's the CSS: .donatenew { width:100%; background: #f8f ...
I am experiencing an issue with the mobile responsive dropdown navigation bar on my website. It works perfectly fine on a small width browser, but when I try to open it on my phone, nothing happens. This is puzzling me as I am new to making websites respon ...
Working on a frontend project using the React framework and Bootstrap 5.3 for design. Noticing that shadows are deactivated in Bootstrap by default, which means buttons don't display shadows when active as per the Bootstrap v5.0 documentation. Link ...
I have been working on an Ajax search suggest input and have successfully implemented it. However, I would like to tweak the script so that when a suggestion is selected, the form auto-submits. Below is my JavaScript code: <script> function suggest ...
I've been having trouble sending an email with an attachment file; it just doesn't seem to work and I can't seem to receive any files. Although my HTML syntax appears correct, as I haven't received any bounce-back emails, the issue per ...
Looking to populate an HTML table with JSON data, but struggling with parsing and appending the data correctly. Can anyone provide guidance or assistance? <!DOCTYPE html> <html> <head> <title>JSON Demo</title> < ...
I am attempting to make changes to the style html - specifically by replacing a string, but unfortunately it is not functioning as expected. I am struggling to obtain the final updated html. Below is my attempt: var html = "<style>043BF83A8FB24A418 ...
Is it possible to apply styles like this in CSS? .bordered { border: 10px dashed yellow; } form input { use .bordered; font-size: 10px; } Alternatively, how can I achieve this without directly embedding each CSS code block in the HTML ele ...
I am looking to enhance the design of my website by updating its template. I want the content to be displayed within a fixed width centered div. While there are plenty of examples on the web for this, I want to ensure that existing text and tables in my ...
I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...
My JavaScript project can be found on GitHub. You can check out a live demo of the project here. The main goal for my HTML Button with id='Multiple-Files' is to enable users to upload multiple files, have them displayed in the console, and then ...
I set up a heading on my website by using the following HTML code: <div id="question"> <h1>Question Goes Here</h1> </div> The font style is controlled by my CSS and it's set to size h1. The text displayed there is tempora ...
I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstr ...
I am currently facing an issue where I have a script that utilizes ajax to receive a response containing a cart string (html code) with items from the cart. Inside the response handler, there is another script that sets the height of each div in the cart s ...
This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...
I have been working on a website and just finished the main page with the header, body, and footer. Now, as I moved on to creating the second page, I encountered an issue. I copied and pasted the code for the header from the main page onto the second page ...
I ran into an issue with a previous question I posted, you can find it here Due to some formatting errors because it was my first time posting a question, the original question is currently closed. I have made edits and resubmitted it for reopening, but I ...