Sass实现输入框聚焦时隐藏placeholder的正确写法咨询

问题根源 #

你之前的写法存在两个核心错误：

• 第一个方案里，&::focus内部的& ~ .input::placeholder逻辑完全错误：&在这里指代#input:focus，~是兄弟选择器，但你的输入框本身没有.input类的兄弟元素，而且你要修改的是当前聚焦输入框自己的placeholder，根本不需要兄弟选择器。
• 第二个方案误用了:focus-within：这个伪类是给父元素用的，用来匹配包含聚焦元素的父容器，直接给输入框加:focus-within没有任何作用，内部重复选择#input也是多余操作。

正确实现代码 #

纯CSS写法

#input {
  height: 30px;
}

#input::placeholder {
  padding-left: 6px;
  /* 不要用display:flex，placeholder本身是行内元素，保留默认布局即可 */
}

#input:focus::placeholder {
  display: none;
}

Sass嵌套简化写法

#input {
  height: 30px;

  &::placeholder {
    padding-left: 6px;
  }

  &:focus::placeholder {
    display: none;
  }
}

额外说明 #

• 无需给::placeholder设置display:flex，这会破坏placeholder的默认布局，直接使用默认的行内样式即可。
• 核心逻辑很简单：当#input处于:focus状态时，修改它自身的::placeholder的display属性为none，这是最直接的伪类组合写法，不需要复杂选择器。

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