我試著在我關注輸入字段的地方輸入，它移除了占位符。我的代碼如下所示...

HTML:

<div className="container">
  <input id="input" placeholder="username" />
</div>

我嘗試在sass中使用~操作符，如下所示...

#input {
  height: 30px;
  &::placeholder {
     display: flex;
     padding-left: 6px;
   }
  &::focus {
    & ~ .input::placeholder {
      display: none
  }
}

也是以下的重點...

#input {
  height: 30px;
  &:focus-within {
     #input::placeholder{
        padding-left: 100px;
     }
   }
  &::placeholder {
     display: flex;
     padding-left: 6px;
   }
  &::focus {
    // set somehow #input::placeholder { display: none }
  }
}

但是這兩者都不起作用，所以我想知道這在SaSS中是如何實現的。我知道我可以用js做到這一點，但是我想用css來做。

篡改想法.. https://jsfiddle.net/o0qftx3b/13/

您需要設置::占位符的不透明度，因為它不一定是像::before或::after這樣的偽元素。它表示屬性文本，不一定符合顯示屬性。

你可以用這個:

#input {
  height: 30px;
  &::placeholder {
    padding-left: 6px;
  }
  &:focus,
  &:focus-within {
    &::placeholder {
      opacity: 0;
    }
  }
}

<div className="container">
  <input id="input" placeholder="username" />
</div>

使用& amp:focus::將顏色設置為透明的占位符:

#input {
  height: 30px;
  
  &:focus::placeholder {

      color: transparent;

  }
}

#input {
  height: 30px;
  
  &:focus::placeholder {

      color: transparent;

  }
}

<div className="container">
  <input id="input" placeholder="username" />
</div>