Why isn't my background-color not working on my html form in css?

February 19, 2022

When I hit the button I want to make my code shows a success field . Choosing the background color of the <div> it wouldn’t work. Is it just my browser or is something wrong with my code?

.div {
  float: top;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  width: 275px;
  height: 375px;
  margin-left: 500px;
  margin-right: 500px;
  margin-top: 125px;
  box-shadow: 0px 0px 20px #00000010;
}

body {
  background-color: #c9ecff;
  overflow-y: hidden;
  overflow-x: auto;
  font-family: 'Ubuntu', sans-serif;
}

textarea {
  border-color: #c4c4c4;
  border-radius: 5px;
  width: 250px;
  font-family: 'Ubuntu', sans-serif;
  resize: none;
}

input {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  font-family: 'Ubuntu', sans-serif;
  width: 250px;
}

form {
  padding: 10px;
}

section {
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  font-family: 'Ubuntu', sans-serif;
  clear: left;
}

label {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 300px;
}

button {
  border: 0px;
  border-radius: 5px;
  width: 100%;
  height: 50px;
  font-family: 'Ubuntu', sans-serif;
  color: #38b9ff;
  background-color: #bae7ff;
  cursor: pointer;
  font-size: 16px;
  transition: 1.5s ease background-color;
}

button:hover {
  background-color: #8ad6ff;
}

#status {
  width: 100px;
  height: 200px;
  max-width: 500px;
  text-align: center;
  align-items: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 10px;
}

#status.success {
  width: 90%;
  max-width: 500px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #7de000;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

<section>
  <div class="div">
    <form action="" method="get">
      <label for="name">Name</label><br>
      <input name="name" id="name"><br><br>
      <label for="mail">G-Mail</label><br>
      <input name="mail" id="mail"><br><br>
      <label for="sub">Subject</label><br>
      <input name="sub" id="sub"><br><br>
      <label for="mess">Message</label><br>
      <textarea id="mess" rows="5" col="80"></textarea><br><br>
      <button type="submit">Submit</button>
    </form>
  </div>
  <div id="status">Success</div>
</section>
<div id="status" class="success">Success</div>

>Solution :

Removing the last div , it’s working well here in my machine. The color change. So remove the last div(yes, i know that you said it was only in the copy, but check again your code).

<section>
  <div class="div">
    <form action="" method="get">
      <label for="name">Name</label><br>
      <input name="name" id="name"><br><br>
      <label for="mail">G-Mail</label><br>
      <input name="mail" id="mail"><br><br>
      <label for="sub">Subject</label><br>
      <input name="sub" id="sub"><br><br>
      <label for="mess">Message</label><br>
      <textarea id="mess" rows="5" col="80"></textarea><br><br>
      <button type="submit">Submit</button>
    </form>
  </div>
  <div id="status" class='success'>Success</div>
</section>