學習成果:一個很簡單的登陸框

時間 2019-11-11

標籤學習成果一個簡單登陸简体版

原文原文鏈接

介紹

除了樣式以外,只經過css的僞類選擇器實現了當鼠標焦點在'用戶名'或'密碼'輸入框時,提示信息自動縮小並跑到左上方。如若輸入框中沒有值，則回到原來的樣子，如有值則再也不恢復。css

其基本原理是 css3 提供的僞元素選擇器，經過在<input>標籤中增長require屬性（這個屬性並非一個鍵值對），使得當輸入框中有內容時會被:valid選擇器選中。至於鼠標焦點還在輸入框中時利用的僞類選擇器:focus算是老生常談了。
但說明輸入框內容的<label>標籤並非<input>標籤的子元素，該如何經過<input>的狀態管理<label>呢？便用到了兄弟選擇器~。eleA ~ eleB做爲選擇器時，會選中全部和 eleA 同輩的 eleB 元素。官方文檔點此：傳送門。html

另外最後被密碼輸入框的瀏覽器自動提示曾經的內容搞得煩的一批，搜索了一下能夠經過在<input>標籤中添加autocomplete="off"禁止瀏覽器作輸入框提示，完美。css3

代碼

index.html瀏覽器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    <div id="login-div">
        <p id="form-title-p">簡單登陸框</p>
        <form action="" id="login-form">
            <div class="input-div">
                <input type="text" id="carpoolername-input" required /> <label>用戶名</label>
            </div>
            <div class="input-div">
                <input type="password" id="password" required autocomplete="off" /> <label>密碼</label>
            </div>
            <div class="btn-div">
                <button id="submit-btn" type="button">登陸</button>
            </div>
        </form>
    </div>
</body>

</html>

index.css
要記得和index.html的相對位置，自行在index.html中添加引用。flex

* {
  padding: 0;
  margin: 0;
}

body {
  background: linear-gradient(127deg, #64c4ed, #fec771);
  height: 100vh;
  
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
}

#login-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: white;

  padding: 3vh 3vw;

  background-color: #8b4367;
  opacity: .8;
  outline: none;
  border: none;
  border-radius: 10px;
  box-shadow: 2px 2px 6px #8b4367;
}


#login-div #form-title-p {
  font-weight: 500;
  font-size: 2rem;
  padding: 10px;
  margin-bottom: 20px;
  letter-spacing: 0.5rem;
}

.input-div {
  position: relative;
  padding: 5px;
  margin-bottom: 2vh;
}

.input-div,
.btn-div {
  text-align: center;
  vertical-align: middle;
}

.input-div input {
  width: 15vw;
  height: 5vh;
  padding: 0 1rem;

  outline: none;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid black;

  font-size: 14px;
}

.input-div label {
  position: absolute;
  left: 1rem;
  top: .5rem;
  font-size: 16px;
  transition: 0.2s;
}

.input-div input:focus ~ label,
.input-div input:valid ~ label {
  left: 0;
  top: -10px;
  font-size: 12px;
}

.btn-div button {
  outline: none;
  border: none;
  
  margin-top: 3vh;

  width: 90%;
  box-sizing: border-box;
  padding: 10px;

  border-radius: 8px;
  box-shadow: 1px 1px 1px #32dbc6;
  background-color: #49beb7;
  color: white;
  font-size: 16px;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。