Question

我正在尝试在输入焦点上实现浮动标签，因为这个带有样式组件：

https://jsfiddle.net/273ntk5s/299/

我做了这个：https://codesandbox.io/s/92474z2wvw

我认为问题在于这个语法：

&:not(:focus):valid ~ ${Label} {
    top: 6px;
    left: 5px;
    font-size: 11px;
    opacity: 0.6;
  }

样式组件中的正确语法是什么？

提前致谢。

Answer 1

我想这里有两个问题。标签将始终应用其中一种样式，因为您的输入始终是＆＃34;在未聚焦时有效。

第二个问题是，根据输入更改标签，而不是让输入影响标签。

所以你在这里有这段代码：

const Input = styled.input`
  &:focus ~ ${Label}, &:not(:focus):valid ~ ${Label} {
    top: 6px;
    left: 5px;
    font-size: 11px;
    opacity: 0.6;
  }
`;

相反，可能更容易做到以下几点：

const Label = styled.label`
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 14px;
  transition: 0.3s ease all;

  ${Input}:focus ~ & {
    top: 6px;
    left: 5px;
    font-size: 11px;
    opacity: 0.6;
  }
`;

我修改了您的代码沙箱以反映这一点，并且在删除第二个规则时它开始工作。看看这个，它可能解释了什么＆＃34;：有效＆＃34;暗示：https://developer.mozilla.org/en-US/docs/Web/CSS/:valid

这是我对分叉沙箱的链接：https://codesandbox.io/s/pp7x5xylo7

输入焦点上的浮动标签

1 个答案: