How to change the background of the form after it has been filled with history data?

Question

How to change the background of the form after it has been filled with history data. Everything works correctly only in Mozilla, the input background turns yellow after it is filled or (autofilled) with data from history and in Chrome it turns blue. I want to have it white in every case.Here is the code from index.php where form has been put:

<?php
    session_start();
    if(isset($_SESSION['zalogowany'])&&$_SESSION['zalogowany']==true)
    {   
    header('Location:panel.php');
    exit();
    }
?>

<!Doctype HTML>
<html lang="pl">
    <head>
        <link href="style.css" rel="stylesheet">
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title>Bukowski-panel sprzedaży</title>
    </head>
    <body>
        <div class="flex-box">
            <div class="form-container">
                <form action="zaloguj.php" method="post">
                    <input type="text" name="login" placeholder="login" onfocus="this.placeholder=''" onblur="this.placeholder='login'">
                    <input type="password" name="haslo" placeholder="haslo" onfocus="this.placeholder=''" onblur="this.placeholder='haslo'">
                    <input id="submit "type="submit" value="zaloguj się">
                </form>
                <div class="logo">Bukowski</div>
                <div class="blad">
                        <?php
                        if(isset($_SESSION['blad']))
                            echo $_SESSION['blad'];
                        ?>
                </div>
            </div>
        </div>
    </body>
</html>

And here is the code from CSS file where form has been styled:

body{
    background-image: url("img/black_twill.png");
    color: white;
    font-size: 20px;
}
@font-face
{
    src: url(mistral.ttf);
    font-family: mistral;
}
.form-container
{
    background-color: white;
    width: 350px;
    text-align: center;
    padding-top: 35px;
    -webkit-box-shadow: inset 0px 0px 5px 11px rgba(0,0,0,0.98);
    -moz-box-shadow: inset 0px 0px 5px 11px rgba(0,0,0,0.98);
    box-shadow: inset 0px 0px 5px 11px rgba(0,0,0,0.98);
}
.flex-box{
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 20px);
    align-items: center;
}
.blad{
    min-height: 30px;
    padding-bottom:5px;
    margin:0px;
}
.logo{
    color: black;
    min-height: 30px;
    padding: 10px 0px 0px 0px;
    font-family: mistral;
    font-size: 25px;
}
input{
    width: 200px;
    border: 1px solid black;
}
input[type=text],
input[type=password]
{
    margin: 8px;
}


input[type=submit]{
    background-color: black;
    color: white;
    cursor: pointer;
    border: 2px solid black;
    padding: 3px;
    font-size: 12px;
    margin: 15px;
}
input[type=submit]:hover
{
    background-color:#222222;
}

And some pictures to show what I mean:

sorry Ok, the code is useful, it turns blue in chrome, but yellow still exists in Mozilla. But in chrome it's okay :) How to change in mozilla as well? — Olaf, Apr 27 '20 at 06:32
Look through that post if clues, and google using the word they use, just adding/replacing with Mozilla. Now you know the language, should be easy, though likely gona still get answers here too even though there absolutely has to be duplicates already — Daniel Brose, Apr 27 '20 at 06:33

score 0 · Answer 1 · answered Apr 27 '20 at 06:30

Try this:

input:-webkit-autofill {
  -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own 
  background color */
  -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
  -webkit-text-fill-color: #333;
}

body {
  background-image: url("img/black_twill.png");
  color: white;
  font-size: 20px;
}

@font-face {
  src: url(mistral.ttf);
  font-family: mistral;
}

.form-container {
  background-color: white;
  width: 350px;
  text-align: center;
  padding-top: 35px;
  -webkit-box-shadow: inset 0px 0px 5px 11px rgba(0, 0, 0, 0.98);
  -moz-box-shadow: inset 0px 0px 5px 11px rgba(0, 0, 0, 0.98);
  box-shadow: inset 0px 0px 5px 11px rgba(0, 0, 0, 0.98);
}

.flex-box {
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 20px);
  align-items: center;
}

.blad {
  min-height: 30px;
  padding-bottom: 5px;
  margin: 0px;
}

.logo {
  color: black;
  min-height: 30px;
  padding: 10px 0px 0px 0px;
  font-family: mistral;
  font-size: 25px;
}

input {
  width: 200px;
  border: 1px solid black;
}

input[type=text],
input[type=password] {
  margin: 8px;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px white inset;
  /* Change the color to your own background color */
  -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px white inset;
  /*your box-shadow*/
  -webkit-text-fill-color: #333;
}

input[type=submit] {
  background-color: black;
  color: white;
  cursor: pointer;
  border: 2px solid black;
  padding: 3px;
  font-size: 12px;
  margin: 15px;
}

input[type=submit]:hover {
  background-color: #222222;
}

<html lang="pl">

<head>
  <link href="style.css" rel="stylesheet">
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Bukowski-panel sprzedaży</title>
</head>

<body>
  <div class="flex-box">
    <div class="form-container">
      <form action="zaloguj.php" method="post">
        <input type="text" name="login" placeholder="login" onfocus="this.placeholder=''" onblur="this.placeholder='login'">
        <input type="password" name="haslo" placeholder="haslo" onfocus="this.placeholder=''" onblur="this.placeholder='haslo'">
        <input id="submit " type="submit" value="zaloguj się">
      </form>
      <div class="logo">Bukowski</div>
      <div class="blad">
        <?php
                        if(isset($_SESSION['blad']))
                            echo $_SESSION['blad'];
                        ?>
      </div>
    </div>
  </div>
</body>

</html>

Okay it works THANK TO ALL OF YOU First input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #fff inset; } and input{ width: 200px; border: 1px solid black; } CLOSED I do appreciate your help — Olaf, Apr 27 '20 at 08:21

How to change the background of the form after it has been filled with history data?

1 Answers1