有条件地引导标签上的占位符答案

【问题标题】：Bootstrap conditionally Placeholder on Label有条件地引导标签上的占位符
【发布时间】：2020-06-23 21:17:16
【问题描述】：

我有一个包含多个输入的内联表单。

在较大的设备中，我想使用 'label' 来指示字段类型，但在较小的设备中，

我想使用“placeholder”来节省空间。对于“标签”，我可以使用引导类 d-none 和 d-sm-block。

如何有条件地为较小的设备显示“占位符”？

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>

  <form class="form-inline">
    <label class="control-label d-none d-sm-block mr-2" for="id1">Country</label>
    <input type="text" id="id1" placeholder="input country">
  </form>

</body>

</html>

【问题讨论】：

在较大的设备上显示占位符也没有什么坏处。默认情况下，占位符将出现在小型和大型设备上。如果你仍然想要这个 - 你需要使用 jQuery 或 Javascript 来让你的占位符隐藏在较大的设备上并显示在小型设备上。

标签： html css twitter-bootstrap

【解决方案1】：

首先，在我看来，没有理由在任何设备中隐藏占位符。因为它的存在是为了为输入元素创建交互式控件。但无论如何，如果您坚持在任何设备中删除它，您可以使用 ::placeholder 伪元素，如下所示：

input::placeholder {
   color: transparent;
}

让你的占位符消失。

因此，对于更精确的示例，您可以查看下面的 sn-p，其中我为最大宽度为 767px 的设备定义了我的媒体，您可以将其更改为您想要的任何内容。

@media only screen and (max-width: 767px) {
   ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
  }
   ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
  }
   :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
  }
  input::placeholder {
    color: transparent;
  }
}

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>

  <form class="form-inline">
    <label class="control-label d-none d-sm-block mr-2" for="id1">Country</label>
    <input type="text" id="id1" placeholder="input country">
  </form>

</body>

</html>

【讨论】：