屏幕加载时转换加载

Question

我在焦点上有边框过渡。当我聚焦输入字段时，我希望边框改变颜色。这很有效。

我不想要的是在页面加载时让边框加载，现在就加载。为什么要这样做？

<input type="stad" name="stad" value=""/>

input {
  border: 7px #227a7b solid;
  height: 20px;
  width: 200px;
  background: #1a5a78;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1a5a78), color-stop(100%, #11c7b8));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #1a5a78 0%, #11c7b8 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5a78', endColorstr='#11c7b8',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  padding: 5px;
  margin-top: -50px;
  transition: 1s border;
}

input:focus {
  outline: none;
  border: green 7px solid;
}