css 输入框 固定文字 |css 电话

/* 输入框样式 */
input[type="text"], input[type="password"], textarea {
position: relative;
}
/* 固定文字样式 */
label {
display: block;
position: absolute;
top: 12px;
left: 12px;
color: #999;
font-size: 12px;
}
/* 输入框 hover 时隐藏固定文字 */
input:hover + label,
textarea:hover + label {
visibility: hidden;
}
/* 输入框 focus 时隐藏固定文字 */
input:focus + label,
textarea:focus + label {
visibility: hidden;
}
/* 输入框有文字时隐藏固定文字 */
input:not(:placeholder-shown) + label,
textarea:not(:placeholder-shown) + label {
visibility: hidden;
}

以上代码中，大家首先对输入框和固定文字分别设置了样式。对于输入框，大家需要将其 position 属性设置为 relative，这样才能使其内部的其他元素相对于其进行定位。对于固定文字，大家通过 position: absolute 定位到输入框内部的合适位置。

接下来，大家设置了输入框 hover、focus、有文字时的固定文字隐藏效果。其中， :placeholder-shown 是一个伪类，它可以匹配到输入框是否有 placeholder 属性，并且是否显示 placeholder 的值。所以当输入框有文字（即 :placeholder-shown 为 false）时，大家可以将固定文字隐藏掉。

经过这些处理，大家就可以以较小的成本实现一个输入框固定文字的效果了。