[HTML+CSS] 动态显示表单栏位标题[练习]

案例来源

本例来自CodingStartup的视频：[HTML+CSS] 动态显示表单栏位标题

案例演示

在线演示

知识总结

1. 因为本例实现的效果是点击文本框，提示信息移动到文本框左边，当用户输入完信息，提示信息移动回文本框并隐藏，所以本例使用了label元素作为提示信息。
2. 根据上面的想法，就有了一下几个实现的关键点：
   1. 如何将label放在文本框输入位置
   2. 如何将提示信息移动
   3. 在文本框有文字时如何隐藏提示信息
3. 本例在input中使用了padding，控制了文本框中文字出现的位置，所以只需要设置label相对于父元素的left和top即可，值与前面padding值对应。
4. 使用input元素的:focus伪类，设置兄弟元素label的移动，其中移动使用了transform: translateX(calc(-100% - 2.5rem));，这里的-100%表示向反方向移动自身的宽度。可以看到这里使用了calc()函数，它可以进行简单的计算。
   • 注意：运算符-左右要有空格。
5. 在隐藏提示信息处使用了input:not(:focus):not(:placeholder-shown)，表示input在没有选中的时候并且placeholder没有显示的时候（也就是说文本框由内容的时候）对兄弟元素label进行隐藏。
   • 注意：input的placeholder属性值不能为空，可以加空格。

主要代码

html

<h2>用户登录</h2>
<div class="row">
    <input placeholder=" " type="text" id="username">
    <label for="username">用户名称</label>
</div>
<div class="row">
    <input placeholder=" " type="password" id="password">
    <label for="password">密码</label>
</div>

css

html {
    font-size: 15px;
}

body {
    margin: 0;
    font-family: Helvetica;
    background-color: #29f1c3;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.row {
    width: 600px;
    margin: .6rem 0;
    position: relative;
}

.row input {
    font-size: 1rem;
    border: 1px solid #03c9a9;
    border-radius: 4px;
    margin: 0;
    padding: .8rem 1rem;
    box-shadow: 0px 1px 2px rgba(0,0,0,.25);
    width: 100%;
    box-sizing: border-box;
    color: #2e3131;
    outline: none;
    transition: all ease-in-out .2s;
}

.row label {
    position: absolute;
    left: 1rem;
    top: .8rem;
    color: #ccc;
    transition: all ease-in-out .2s;
}

h2 {
    font-size: 2rem;
    letter-spacing: .1rem;
    margin-bottom: 2rem;
}

.row input:focus {
    border: 1px solid #1ba39c;
}

.row input:focus + label {
    transform: translateX(calc(-100% - 2.5rem));
    color: #2e3131;
}

input:not(:focus):not(:placeholder-shown) + label {
    color: rgba(0,0,0,0);
}