CSS 応用
今どのフォームに入力をしているかをわかりやすくしよう
<form action="" method="get">
  <label for="item1">項目1</label><input id="item1" type="text" />
  <label for="item2">項目2</label><input id="item2" type="text" />
  <label for="item3">項目3</label><input id="item3" type="text" />
</form>

input { outline: none;}
input {
    display: block;
    margin-bottom: 25px;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    padding: 10px;
    border: solid 2px #ccc;
    box-shadow: none;
    transition: all 0.5s;
}
input:focus {
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
    border: solid 2px #666;
}
結果