如何用Styled Components实现输入框聚焦及输入时标签上移

问题根源 #

1. 输入框未添加required属性，导致:valid伪类在输入框为空时就触发，无法区分“空输入”和“已输入”状态
2. 标签初始位置未明确设定，默认位置导致与输入文本重叠
3. :valid对应的标签样式未设置上移效果，反而停留在输入区域内，造成覆盖

修改后的代码 #

import styled from 'styled-components';

export const InputGroup = styled.label`
    margin:1rem 0;
    position:relative;
    display:inline-block;
`;

export const InputLabel = styled.span`
    padding:0;
    pointer-events: none;
    position:absolute;
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    // 设置初始位置，与输入框padding对齐
    top: 16px;
    left: 0;
`;

export const InputField = styled.input`
    padding: 16px 0;
    border: none;
    font-size: 18px;
    border-bottom: 1px solid #000000;
    // 确保输入文本层级高于标签初始位置
    position: relative;
    z-index: 2;
    background: transparent;

    &:focus {
        outline:0;
        border-bottom: 1px solid #000000;
    }

    // 统一聚焦/有内容时的标签上移效果
    &:valid + ${InputLabel},
    &:focus + ${InputLabel} {
        opacity:1;
        transform: scale(0.75) translateY(-150%) translateX(-20px);
        font-size:1.2rem;
        color: #8d8d8d;
    }
`;

// 使用时必须添加required属性
<InputGroup>
  <InputField required />
  <InputLabel>Full Name</InputLabel>
</InputGroup>

修改说明 #

1. 添加required属性：让:valid伪类仅在输入框有内容时触发，精准区分输入状态
2. 固定标签初始位置：通过top:16px; left:0;让标签初始时与输入框内边距对齐，避免错位
3. 合并状态样式：将:valid和:focus的标签效果统一，确保聚焦、输入内容时标签都上移到输入框上方
4. 层级优化：给输入框设置更高层级，彻底避免输入文本被标签覆盖

内容的提问来源于stack exchange，提问作者abeer