輸入框提示文字上移效果｜8月更文挑戰

這是我參與8月更文挑戰的第8天，活動詳情查看：8月更文挑戰

做者：battleKing
倉庫：Github、CodePen
博客：CSDN、掘金
反饋郵箱：myh19970701@foxmail.com
特別聲明：原創不易，未經受權不得轉載或抄襲，如需轉載可聯繫筆者受權

背景

咱們在設置 表單 時，通常都要設置一些 提示文字 搭配 輸入框 來告知用戶這裏輸入什麼內容，此時根據提示文字的位置，咱們通常有三種設計方案。

1. 使用placeholder = "請輸入用戶名" 把 提示文字 設置在 輸入框裏面
   • 優勢：節約空間
     
   • 缺點：當咱們點擊輸入框，想要輸入文字時，提示文字會消失，用戶體驗差

得到輸入框焦點前.PNG 得到輸入框焦點後.PNG

1. 使用一個 <label> 用戶名 </label> 把 提示文字 設置在 輸入框的左邊或 輸入框的上面
   • 優勢：提示文字清晰
     
   • 缺點：佔用空間大

1. 使用一個 <label> 用戶名 </label> 把 提示文字 設置在 輸入框裏面
   • 優勢：當咱們點擊輸入框，想要輸入文字時，提示文字上移，用戶體驗好
     
   • 缺點：佔用空間大

得到輸入框焦點前.PNG

得到輸入框焦點後.PNG

由於 第三種 兼顧了 時尚感 和 實用性，因此在不少新興企業裏面被普遍使用

最終效果

1、添加 HTML 文件

1. 添加一層最外層的類名爲 box 的 <div>
2. box 裏面再添加一層類名爲 input_data 的 <div>
3. input_data 裏面添加一層 <input>
4. input_data 裏面添加一層 <label>

<div class="box">
    <div class="input_data">
        <input type="text" required>
        <label>Number</label>
    </div>
</div>
複製代碼

2、添加 CSS 文件

先初始化頁面

1. 設置 * 爲 box-sizing: border-box
2. 設置 body 來使整個項目居中

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(-135deg, #c850c0, #4158d0);
}
複製代碼

主要 CSS 代碼

.box {
    width: 450px;
    background: #fff;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box .input_data {
    height: 40px;
    width: 100%;
    position: relative;
}

.box .input_data input {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    font-size: 16px;
    border-bottom: 2px solid silver;
}

.input_data input:focus,
.input_data input:valid {
    outline: 0;
    border-bottom-color: #4158d0;
}

.input_data input:focus~label,
.input_data input:valid~label {
    transform: translateY(-30px);
    font-size: 12px;
    color: #4158d0;
}

.box .input_data label {
    position: absolute;
    bottom: 10px;
    left: 0;
    color: grey;
    pointer-events: none;
    transition: all 0.3s ease;
}
複製代碼

核心邏輯

1. 爲.input_data input:focus~label 和 .input_data input:valid~label 添加三個屬性
   • transform: translateY(-30px); 輸入框得到焦點時，提示文字向上
   • font-size: 12px; 輸入框得到焦點時，字體尺寸變小
   • color: #4158d0; 輸入框得到焦點時，字體變爲藍色
2. 爲 .box .input_data label 添加兩個屬性
   • pointer-events: none; 提示文字不會阻擋輸入框得到焦點
   • transition: all 0.3s ease; 過渡動畫效果

❤️ 感謝你們

若是本文對你有幫助，就點個贊支持下吧，你的「贊」是我創做的動力。

若是你喜歡這篇文章的話，能夠「點贊」 + 「收藏」 + 「轉發」 給更多朋友。