選択済みの要素の色を変えよう

あらかじめエディタに書くコード

                    <select name="number">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<div class="box">
  <p class="1">1</p>
  <p class="2">2</p>
  <p class="3">3</p>
  <p class="4">4</p>
</div>
¥HTML¥
                

                    .box{
  height: 100px;
  display: flex;
}
p{
  text-align: center;
  line-height: 100px;
  width: 100px;
  height: inherit;
  margin: 0;
  background-color: #dddddd;
}
¥CSS¥
                

期待する画面