I'm having some trouble creating a signup form with SVG logos. The colors seem to clash and no matter what I do, the color doesn't change from white.
My goal is to have the actual SVG logo remain white while the background behind it is black. Here's the code I've been working on:
https://pastebin.com/zzW4Y1m6 -- HTML
.form-control {
width: 100%; /* Make sure the input fills the container */
height: 48px;
padding: 0px 8px;
border: 1px solid transparent; /* Remove default border */
box-sizing: border-box;
border-radius: 12px;
background-color: #141414; /* Darker color for input box */
color: #bababa; /* Default text color */
font-size: 14px;
font-family: "Poppins";
font-weight: 500;
line-height: 18px;
outline: none;
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth focus effect transition */
}
.logo-wrapper {
position: relative;
background-color: black; /* Set logo area background to black */
}
.logo-wrapper img {
position: absolute;
top: 50%; /* Vertically center */
left: 50%; /* Horizontally center */
transform: translate(-50%, -50%);
}
.form-control:focus {
background-color: #141414; /* Keep original background color on focus */
color: #ffffff; /* Change text color to white on focus */
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* Add light gray curved outline on focus */
}<body>
<div class="signup-container">
<div class="signup-image">
<img src="x.jpg" alt="Signup Image">
</div>
<div class="signup-form">
<h2 class="signup-title">Sign Up</h2>
<h4 class="signup-info">Join QuizGenius To Unlock Quizzes!</h4>
<form>
<div class="mb-3">
<label for="name" class="input-description">Your full name</label>
<div class="input-group">
<input type="text" class="form-control" id="name" placeholder="First Last">
<span class="input-group-text logo"><svg xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; overflow: visible; fill: rgb(255, 255, 255);" viewBox="0 0 576 512"><path d="M528 32h-480C21.49 32 0 53.49 0 80V96h576V80C576 53.49 554.5 32 528 32zM0 432C0 458.5 21.49 480 48 480h480c26.51 0 48-21.49 48-48V128H0V432zM368 192h128C504.8 192 512 199.2 512 208S504.8 224 496 224h-128C359.2 224 352 216.8 352 208S359.2 192 368 192zM368 256h128C504.8 256 512 263.2 512 272S504.8 288 496 288h-128C359.2 288 352 280.8 352 272S359.2 256 368 256zM368 320h128c8.836 0 16 7.164 16 16S504.8 352 496 352h-128c-8.836 0-16-7.164-16-16S359.2 320 368 320zM176 192c35.35 0 64 28.66 64 64s-28.65 64-64 64s-64-28.66-64-64S140.7 192 176 192zM112 352h128c26.51 0 48 21.49 48 48c0 8.836-7.164 16-16 16h-192C71.16 416 64 408.8 64 400C64 373.5 85.49 352 112 352z"></path></svg></span>
</div>
</div>
<!-- More input fields go here -->
<!-- Additional SVG logos can be added following the same structure -->
</body>