仅使用CSS更改占位符文本

Question

我正在构建其中一个会话的联系表单。喜欢：

问题在于其中一个上的占位符文本非常大并且会分成两行，或者如果我给它一个固定的宽度，它会破坏较小的手机的布局。是的，我理解非常简单的解决方案是建议对任何实例的副本进行更改，但是由于无法完成，我将如何解决基于设备宽度的文本交换问题。

我建议的解决方案是减少移动设备上的文字。由于他们对移动产品更灵活，我可以进行这些更改，但桌面需要符合PSD。

演示

CodePen上的演示

HTML

<input type="text" id="org" name="" placeholder="ORGANIZATION OR COMPANY NAME">

CSS

#org{
  display: block;
  width: 96%;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #org{
    display: inline-block;
    width: 360px;
  }
}

它需要至少360px才能匹配桌面的PSD。

我拥有的另一个选择是，如果我有完全不同的输入，那会有效吗？喜欢

<input type="text" id="org" class="orgm" name="" placeholder="ORG/COMPANY">
<input type="text" id="org" class="orgd" name="" placeholder="ORGANIZATION OR COMPANY NAME">


.orgm { //mobile
    display: block;
}
.orgd {
    display: none;
}
@media only screen and (min-width: 768px) {
  .orgm{
      display: none;
      width: 96%;
      margin: 0 auto;
  }
  .orgd {
      display: inline-block;
      width: 360px;
      margin: 0;
  }
}

我不想使用jQuery或其他基于javascript的解决方案。

Answer 1

如果你绝对必须保留那份副本而且愿意做一些有点hacky的事情，这就是烦人的地方，但是你可以试试......

<div class="input--container">
    <p class="input--placeholder">
        <span class="desktop">ORGANIZATION OR </span>
        COMPANY NAME
    </p>
    <input type="text" id="org" class="input" name="">
</div>

// Hide the long part on mobile
.input--placeholder span { //mobile
    display: none;
}

@media only screen and (min-width: 768px) {
    // Show the full on desktop
    .input--placeholder span {
       display: inline;
    }
}

然后你必须将占位符文本放在输入顶部。

编辑：当用户使用输入进行输入时，您还必须完全隐藏占位符：焦点选择器