Form Focus Element - CSS

Utilise :focus-within to have more visual emphasis on the part of an element that has a focused element.

DEMO

Step 1

Answer 1:

Answer 2:

Step 2

Answer 3:

Answer 4:

HTML

<fieldset>
    <legend>Step 1</legend>
    <div>
      <label for="q_1">Answer 1:</label>
      <input id="q_1" />
    </div>
    <div>
      <label for="q_2">Answer 2:</label>
      <input id="q_2" />
    </div>
  </fieldset>

  <fieldset>
    <legend>Step 2</legend>
    <div>
      <label for="q_3">Answer 3:</label>
      <input id="q_3" />
    </div>
    <div>
      <label for="q_4">Answer 4:</label>
      <input id="q_4" />
    </div>
  </fieldset>

CSS

fieldset{
  margin: 0 20px 20px;
  background: #eee;
  border-radius: 3px;
  border: solid 1px #aaa;
  position: relative;
  transition: all 0.2s;
}

fieldset::before {
  content: '\1F6A9';
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: -5px;
  transition: all 0.2s;
  opacity: 0;
  transform: translateX(-20px);
}

legend {
  margin-left: 8px;
  text-transform: uppercase;
  color: #555;
  font-size: 80%;
  letter-spacing: 0.5px;
}

input {
  margin-left: 1em;
  padding: 0.2em 0.5em;
  border: solid 1px #999;
  width: calc(100% - 130px);
}

input:focus {
  outline: none;
  border-color: Crimson;
  box-shadow: 0 0 1px 1px #1389fd;
}

div {
  margin: 0.5em;
}


fieldset:focus-within {
  background: Cornsilk;
  transform: scale(1.02);
}

fieldset:focus-within::before {
  opacity: 1;
  transform: translateX(0px);
}