Result

何の項目か分かりやすく明示されたinput要素

css

input {
  background: transparent;
}

input[type=text], 
input[type=password] {/*input要素装飾*/
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.75);
  padding: .5em 0;
  border: 0.125em solid #dfdfdf;
  border-radius: .25em;
  width: 75%;
  max-width: 25rem;
  min-width: 10rem;
  line-height: 1.618em;
  font-size: 1.5rem;
  transition: border-color 0.15s ease-in-out;
}

input[type=text]:focus, 
input[type=text]:active, 
input[type=password]:focus, 
input[type=password]:active {/*アクティブ時のボーダーカラー*/
  border-color: #53a0db;
}

input[type=password] {
  font-weight: 700;
  text-indent: .3em;
  letter-spacing: .3em;
}

label {/*labelをボーダー上に配置*/
  transition: color 0.15s ease-in-out;
  padding: 0 1em;
  border-radius: 2em;
  position: relative;
  top: -1em;
  background-color: rgba(255, 255, 255, 0.95);
  margin-top: -2em;
  display: inline-block;
  color: #9a9a9a;
  text-transform: uppercase;
  font-size: 0.8125em;
  letter-spacing: .1em;
  text-indent: .1em;
}

label[for]:hover {
  cursor: pointer;
}
input:focus + span > label {
  color: #676767;
}

html

<div>
      <input type="password" id="password" value="hoge">
      <span>
        <label for="password">パスワード</label>
      </span>
    </div>

via

Login form