Html Question posted in
Some basic documentation can be found here.

Html – How can I make the color behind the SVG's Black?

I am trying to create a signup form with SVG logos, but the colours conflict and for some odd reason it never changes from white.

I want to keep the actual SVG white but the background behind it black. Below is my code:

https://pastebin.com/zzW4Y1m6 — HTML

.form-control {
    width: 100%; /* Ensure the input takes up the full width of its container */
    height: 48px;
    padding: 0px 8px;
    border: 1px solid transparent; /* Remove the original border */
    box-sizing: border-box;
    border-radius: 12px;
    background-color: #141414; /* Slightly darker color for the 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 transition for focus effects */
}

.logo-wrapper {
    position: relative;
    background-color: black; /* Makes the logo area black */
}

.logo-wrapper img {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%);
}

.form-control:focus {
    background-color: #141414; /* Maintain the 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 a light gray, curved outline */
}
<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>
                <div class="mb-3">
                    <label for="email" class="input-description">Email address</label>
                    <div class="input-group">
                        <input type="email" class="form-control" id="email" placeholder="Enter your email">
                        <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 512 512"><path d="M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z"></path></svg></span>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="username" class="input-description">Username</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="username" placeholder="Choose a username">
                        <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 512 512"><path d="M256 288c79.53 0 144-64.47 144-144s-64.47-144-144-144c-79.52 0-144 64.47-144 144S176.5 288 256 288zM351.1 320H160c-88.36 0-160 71.63-160 160c0 17.67 14.33 32 31.1 32H480c17.67 0 31.1-14.33 31.1-32C512 391.6 440.4 320 351.1 320z"></path></svg></span>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="password" class="input-description">Password</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="password" placeholder="Enter your password">
                        <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 512 512"><path d="M282.3 343.7L248.1 376.1C244.5 381.5 238.4 384 232 384H192V424C192 437.3 181.3 448 168 448H128V488C128 501.3 117.3 512 104 512H24C10.75 512 0 501.3 0 488V408C0 401.6 2.529 395.5 7.029 391L168.3 229.7C162.9 212.8 160 194.7 160 176C160 78.8 238.8 0 336 0C433.2 0 512 78.8 512 176C512 273.2 433.2 352 336 352C317.3 352 299.2 349.1 282.3 343.7zM376 176C398.1 176 416 158.1 416 136C416 113.9 398.1 96 376 96C353.9 96 336 113.9 336 136C336 158.1 353.9 176 376 176z"></path></svg></span>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="confirm-password" class="input-description">Confirm Password</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="confirm-password" placeholder="Confirm your password">
                        <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 448 512"><path d="M80 192V144C80 64.47 144.5 0 224 0C303.5 0 368 64.47 368 144V192H384C419.3 192 448 220.7 448 256V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V256C0 220.7 28.65 192 64 192H80zM144 192H304V144C304 99.82 268.2 64 224 64C179.8 64 144 99.82 144 144V192z"></path></svg></span>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Sign Up</button>
            </form>
        </div>
    </div>
</body>
Tags:

2

Answers


  1. 0

    You can put the svg inside a "div" element instead of span and then give "div" element the properties below.

    .logo{
    position: relative;
    width: max-content;
    background: black;
    height: 24px;
}

    And if you want to change the color of the SVG then use styling like this

    .logo > svg {
  fill: <your color>
}
    Login or Signup to reply.
  2. 0

    All you need is to do Few of tweaks…

    • Remove inline style from svg element
    • Write down svg tag as <svg width="24" height="24" .... ></svg>
    • Add these lines to your CSS span.logo > svg > path {fill: <your color>;}
    • If you want to change the color of svg on form-control focus you can
      do it this way .form-control:focus + span.logo svg path{fill:<your color>;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search