<div class="form-group">
  <label for="email">Your email:</label>
  <input type="email" name="email" id="email" placeholder="Enter your email address"/>
</div>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
input[type="email"] {
  padding: 5px 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 400px;
}
.form-group *:focus {
  background: yellow;
  color: #000;
}
.form-group {
  padding: 10px;
  border: 3px solid transparent
}

.form-group:focus-within {
  border-color: #000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.