Pure HTML Stepper Ändern der Farbe der Linie

Guest · Post by **Guest** » 18 Jan 2025, 20:55

Ich habe einen reinen HTML-Stepper. Es funktioniert, wenn sich die „aktive“ Klasse im 2., 3. usw. Element befindet. Aber ich habe ein Problem, wenn die „aktive“ Klasse nur in der 1. Klasse ist.
Wie mache ich es, wenn die „aktive“ Klasse in der ersten Klasse ist, dann ist keine Zeile vorhanden farbig? Wenn nur der erste Stepper aktiv ist, sollte keine Linie ihre Farbe ändern, sondern nur die Farbe vor dem Stepper mit der aktiven Klasse sollte gefärbt sein.
Unten ist der Screenshot:

Code: Select all

:root {
--circle-size: clamp(1.5rem, 5vw, 3rem);
--spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.stepper {
display: flex;
}

.stepper-item {
display: flex;
flex-direction: column;
flex: 1;
text-align: center;

&::before {
--size: 3rem;
content: "";
display: block;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 0.4rem solid green;
background-color: transparent;
opacity: 0.5;
margin: 0 auto 1rem;
}

&:not(:last-child) {
&::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
order: -1;
}
}
}

.stepper-title {
font-weight: bold;
font-size: clamp(1rem, 4vw, 1.25rem);
margin-bottom: 0.5rem;
color: #448b62;
}

.stepper-desc {
color: grey;
font-size: clamp(0.85rem, 2vw, 1rem);
padding-left: var(--spacing);
padding-right: var(--spacing);
}

/*** Non-demo CSS ***/

.wrapper {
max-width: 100%;
margin: 2rem auto 0;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

.stepper-item::before {
--size: 3rem;
content: attr(data-step);
/* Use a custom attribute for step number */
display: flex;
align-items: center;
justify-content: center;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 4% solid rgb(0, 64, 255);
opacity: 0.5;
margin: 0 auto 1rem;
font-weight: bold;
font-size: 1.25rem;
color: #448b62;
/* Font customization */
font-family: 'Poppins', sans-serif;
/* Change to any desired font */
font-weight: 700;
/* Bold */
font-size: 1.5rem;
/* Adjust size */
letter-spacing: 0.05rem;
/* Optional spacing */
}

.stepper-item.active::before {
opacity: 1;
border: 0.4rem solid red;
color: red;
}

.stepper-item.active .stepper-title {
color: red;
}

.stepper-item.active:is(:first-child):after {
background-color: red;
opacity: 1;
}

/* Style the line between consecutive active items */
.stepper-item.active+.active:before {
opacity: 1;
}

.stepper-item:not(:last-child)::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
opacity: 0.5;
order: -1;
}

/* Color line red only when current item is active AND next item is active */
.stepper-item:not(:first-child).active:not(:last-child):has(+ .active)::after {
background-color: red;
opacity: 1;
}

/* Special case for first item - only color if next is active */
.stepper-item:first-child.active:has(+ .active)::after {
background-color: rgb(255, 0, 0);
opacity:  1;
}

Code: Select all

[list]
[*]
Step 1
Authentication started

[*]
Step 2
Authentication successful

[*]
Step 3
Authorization complete

[*]
Step 4
Finalizing process

[*]
Step 5
Process complete

[/list]

Pure HTML Stepper Ändern der Farbe der Linie

Pure HTML Stepper Ändern der Farbe der Linie ⇐ HTML

Quick Reply