输入焦点上的浮动标签答案

【问题标题】：Floating label on input focus输入焦点上的浮动标签
【发布时间】：2018-02-27 22:03:29
【问题描述】：

我正在尝试使用样式组件在输入焦点上实现浮动标签：

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

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

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

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

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

提前致谢。

【问题讨论】：

你可以使用这个浮动标签组件react-styled-floating-label。它可以使用 styled-components 设置样式。

标签： styled-components

【解决方案1】：

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

第二个问题是，根据输入改变标签比让输入影响标签更容易。

所以你这里有这段代码：

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;
  }
`;

我已经修改了您的代码沙箱以反映这一点，并且在删除第二条规则时它开始起作用。看看这个，它可能解释了 ":valid" 的含义：https://developer.mozilla.org/en-US/docs/Web/CSS/:valid

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

【讨论】：