带有网格输入的样式化组件

Question

我正在尝试设置一个带有样式组件的网格容器。我有六个带标签的输入，每个输入都有一个标签。我的问题是所有标签都相互显示。

我认为这个位置是错误的，我试图找到哪个可以工作但没有成功。如何将每个标签设置为他自己的输入？

我的代码：

import React from "react";
import styled from "styled-components";

const Div = styled.div`
  position: fixed;
  top: 10rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 240px);
  @media (max-width: 750px) {
    grid-template-columns: auto;
  }
`;

const Input = styled.input`
  font-size: 18px;
  padding: 10px 20px 10px 20px;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.8rem;
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
  text-align: center;
  &:focus {
    outline: none;
  }
  &:not(:focus)::placeholder {
    color: transparent;
  }
`;
const Label = styled.label`
  color: black;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  right: 1rem;
  top: 0.5rem;
  transition: 0.2s ease all;
  ${Input}:focus ~ &,
  ${Input}:not(:placeholder-shown) ~ & {
    top: -0.5rem;
    right: 1rem;
    font-size: 0.8rem;
    color: black;
    background-color: #fff;
  }
`;

const FloatingInput = () => (
  <Div>
    <Input placeholder="test" />
    <Label>hello</Label>

    <Input placeholder="test" />
    <Label>hello</Label>

    <Input placeholder="test" />
    <Label>hello</Label>
    <Input placeholder="test" />
    <Label>hello</Label>

    <Input placeholder="test" />
    <Label>hello</Label>

    <Input placeholder="test" />
    <Label>hello</Label>
  </Div>
);

export default FloatingInput;

Answer 1

作为一个选项，我建议将输入和标签包装在一个包装器中。您的标签将定位在哪个位置。如果我正确理解了这个问题，那么标签将始终位于输入的右上角并带有焦​​点。希望它有所帮助。祝你好运。 Codesandbox example

import React from 'react';
import styled from "styled-components";

const Div = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 240px);
  gap: 1rem;

  @media (max-width: 750px) {
    grid-template-columns: auto;
  }
`;

const Field = styled.div`
  position: relative;
`;

const Label = styled.label`
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  transition: 0.2s ease all;
  color: black;
  pointer-events: none;
`;

const Input = styled.input`
  border-radius: 0.8rem;
  border-width: 1px;
  padding: 10px;
  box-shadow: 5px 10px #888888;
  font-size: 18px;
  text-align: center;

  :focus {
    outline: none;
  }

  :not(:focus)::placeholder {
    color: transparent;
  }

  :focus + ${Label}, :not(:placeholder-shown) + ${Label} {
    top: 0;
    right: 1rem;
    font-size: 0.8rem;
    color: black;
    background-color: #fff;
  }
`;

const App = () => (
    <Div>
      <Field>
        <Input placeholder="test" />
        <Label>hello</Label>
      </Field>

      <Field>
        <Input placeholder="test" />
        <Label>hello</Label>
      </Field>

      <Field>
        <Input placeholder="test" />
        <Label>hello</Label>
      </Field>

      <Field>
        <Input placeholder="test" />
        <Label>hello</Label>
      </Field>

      <Field>
        <Input placeholder="test" />
        <Label>hello</Label>
      </Field>

      <Field>
        <Input placeholder="test" />
        <Label>hello</Label>
      </Field>
    </Div>
);

export default App