<div class="outer">
  <h3>クリックすると色が変わってサイズが大きくなるinput</h3>
  <input type="text" class="form-input" placeholder="検索 ...">
</div>

.outer {
  margin: 20px;
}

input {
  /* Reset スタイルをリセット */
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.form-input {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 16px;
  border: 1px solid #9e9e9e;
  transition: all 0.5s;
  width: 100px;
}
.form-input:focus {
  border-color: #00bcd4;
  background-color: #e0f7fa;
  width: 300px;
}