输入框提示文字上移效果｜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; 过渡动画效果

❤️ 感谢你们

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

若是你喜欢这篇文章的话，能够「点赞」 + 「收藏」 + 「转发」 给更多朋友。