输入框提示文字上移效果｜8月更文挑战

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

我们在设置 表单 时，一般都要设置一些 提示文字 搭配 输入框 来告知用户这里输入什么内容，此时根据提示文字的位置，我们一般有三种设计方案。

1. 使用placeholder = "请输入用户名" 把 提示文字 设置在 输入框里面

   • 优点：节约空间
     
   • 缺点：当我们点击输入框，想要输入文字时，提示文字会消失，用户体验差 获得输入框焦点前.PNG 获得输入框焦点后.PNG

2. 使用一个 <label> 用户名 </label> 把 提示文字 设置在 输入框的左边或 输入框的上面

   • 优点：提示文字清晰
     
   • 缺点：占用空间大

3. 使用一个 <label> 用户名 </label> 把 提示文字 设置在 输入框里面
   • 优点：当我们点击输入框，想要输入文字时，提示文字上移，用户体验好
     
   • 缺点：占用空间大 获得输入框焦点前.PNG

获得输入框焦点后.PNG

因为 第三种 兼顾了 时尚感 和 实用性，所以在很多新兴企业里面被广泛使用

最终效果

一、添加 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>

二、添加 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; 过渡动画效果

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。