今天要講的是金魚都能懂的網頁切版 : 登入表單 NO017，
有沒有人跟我一樣超常忘記密碼的？
有些密碼重設還不能跟之前一樣，
然後我就每次都會忘記我新設定的密碼，
不然就是還有一些規定至少要有大寫或是特殊符號的，
只是想登入怎麼這麼難 OTZ。

本篇關鍵字

• backdrop-filter
• caret-color
• ::placeholder

範例檔

(背景圖片：Nastuh Abootalebi from Unsplash)

HTML

<div class="login">
  <form>
    <h2>會員登入</h2>
    <div class="input-group">
      <label for="user-id">帳號：</label>
      <input type="name" id="user-id" placeholder="不會連帳號都不記得吧">
    </div>
    <div class="input-group">
      <label for="user-pwd">密碼：</label>
      <input type="password" id="user-pwd" placeholder="是不是又忘記密碼了啊">
    </div>
    <a href="#">忘記密碼？</a>
    <div class="btn-group">
      <button class="btn">登入</button>
      <button class="btn">取消</button>
    </div>
  </form>
</div>

CSS

body {
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80') no-repeat center center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  width: 600px;
  height: 500px;
  background-color: rgba(0, 0, 0, .5);
  backdrop-filter: blur(5px);
  border: 10px solid #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form {
  width: 400px;
  color: #fff;
}

form h2 {
  font-size: 28px;
  text-align: center;
  padding-bottom: .5em;
  margin-bottom: .5em;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  line-height: 2.5;
}

.input-group input {
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  caret-color: #D19826;
}

.input-group input:focus {
  outline: none;
}

.input-group input:focus::placeholder{
  color: transparent;
}

form a {
  display: inline-block;
  color: #ccc;
  margin-bottom: 20px;
}

.btn-group {
  display: flex;
}

.btn-group .btn {
  color: #D19826;
  font-size: 20px;
  padding: 10px;
  border: 2px solid #D19826;
  border-radius: 5px;
  width: 200px;
  background-color: transparent;
  cursor: pointer;
  transition: .3s;
}

.btn-group .btn:focus {
  outline: none;
}

.btn-group .btn:hover {
  background-color: #D19826;
  color: #fff;
}

.btn-group .btn+.btn {
  margin-left: 15px;
}

喪屍分解

• 在 input 標籤中加入 placeholder 可以在 input 裡面自動顯示輸入的內容，用意是用來提醒或是舉例
• 使用 backdrop-filter 製作出毛玻璃效果（IE 不支援，safari 需要加上 prefix
• 在 input 設定 caret-color 可以改變 input 內游標的顏色
• ::placeholder 這個 pseudo-element 可以設定 placeholder 的樣式，我多數是設定 input 被 :focus 的時候，讓 placeholder 的顏色變成透明

希望做完這個表單，
大家都不會再忘記自己的密碼嚕～
以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是頁尾。