form ekranında checkbox renk değiştirme sorunu

html ve css kullanarak bu şekilde bi login formu yaptım. daha dogrusu youtubeden bakarak yaptım. ufak tefek eklemelerde yaptım. fakat arkaplana verdiğim animasyonla birlikte remember me kutusuna tıklayınca checkbox rengide arkaplana göre değişiyor.
bunun değişmemesi için nereye müdahale etmeliyim?

<section>
        <div class="login-box">
            <form action="index.php">
                <h2>Login</h2>
                <div class="input-box">
                    <span class="icon">
                        <ion-icon name="person"></ion-icon>
                    </span>
                    <input type="username" required>
                    <label>Username</label>
                </div>
                <div class="input-box">
                    <span class="icon">
                        <ion-icon name="lock-closed"></ion-icon>
                    </span>
                    <input type="password" required>
                    <label>Password</label>
                </div>
                <div class="remember-forgot">
                    <label>
                        <input type="checkbox"> Remember Me
                    </label>
                    <a href="forgot.html">Forgot Password?</a>
                </div>
                <button type="submit">Login</button>
                <div class="register-link">
                    <p>
                        You don't have an account?
                        <a href="register.html" style="letter-spacing: 1.5px;">Register</a>
                    </p>
                </div>
            </form>
        </div>
    </section>

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;&display=swap');


* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: url('bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    animation: animateBg 5s linear infinite;
}

@keyframes animateBg {
    100% {
        filter: hue-rotate(360deg);
    }
}

.login-box {
    position: relative;
    width: 400px;
    height: 450px;
    background: transparent;
    border-radius: 20px;
    display: flex;
    border: 2px solid rgba(255, 255, 255, .5);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(15px);
}

h2 {
    font-size: 2em;
    color: #fff;
    text-align: center;
}

.input-box {
    position: relative;
    width: 310px;
    margin: 30px 0;
    border-bottom: 2px solid #fff;
}

.input-box label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: white;
    pointer-events: none;
    transition: .5s;
}

.input-box input:focus ~ label,
.input-box input:valid ~ label {
    top: 5px;
}

.input-box input {
    widows: 100%;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: white;
}

.input-box .icon {
    position: absolute;
    right: 8px;
    color: white;
    font-size: 1.2em;
    line-height: 57px;
}

.remember-forgot {
    margin: -15px 0 15px;
    font-size: .9em;
    color: white;
    display: flex;
    justify-content: space-between;
}

.remember-forgot label input {
    margin-right: 3px;
}

.remember-forgot a {
    color: white;
    text-decoration: none;
}

.remember-forgot a:hover {
    text-decoration: underline;
}

button {
    width: 100%;
    height: 40px;
    background: white;
    border: none;
    outline: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 1em;
    color: black;
    font-weight: 500;
}

.register-link {
    font-size: .9em;
    color: white;
    text-align: center;
    margin: 25px 0 10px;

}

.register-link p a {
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.register-link p a:hover {
    text-decoration: underline;
}

@media (max-width: 360px) {
    .login-box {
        width: 100%;
        height: 100vh;
        border: none;
        border-radius: 0;
    }
}

hocam bunu aynı şekilde chatgpte yaz değiştirip veriyor kodları

css kodlarınıza bunu ekleyin

.remember-forgot label input { margin-right: 3px; background-color: white; /* Checkbox arkaplan rengi */ }

chatgpt o kadar akıllı mı ya? background: white ekledim yine aynı.. tıklanınca renk değiştirme baslıyor normalde sıkıntı yok

chatgpt bile yardımcı olamadı

chatgpt ile yaptıgımız toplantılar sonucunda alttaki kodları css dosyama ekledim ve sorun çözüldü. biraz yorduk chatgpt efendiyi..

.remember-forgot label input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #fff;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    outline: none;
    position: relative;
    cursor: pointer;
}

.remember-forgot label input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 2px;
}