如何创建永久占位符？ CSS / HTML

Posted 2023-03-05

【中文标题】如何创建永久占位符？ CSS / HTML

【英文标题】：How do I create permanent placeholders? CSS / HTML

【发布时间】：2019-12-08 16:11:33

【问题描述】：

我正在为我的第一份正式开发工作编写一个网络表单。

我目前正在尝试使我的输入字段占位符不会消失，而是我需要它们缩小​​并移动到输入字段的顶部。 我能够找到一些应该完成工作但没有完成的代码。 谁能指导我如何完成这项工作？

我找到的代码：https://jsfiddle.net/p19j2nm5/

我已经为此工作了几个小时，尝试了各种变化，但没有运气。

.wrapper /*wpcf7*/
    position:relative;


input 
  font-size: 14px;
  height: 40px;



.placeholder
  position:absolute;
  font-size: 25px;
  pointer-events:none;
  left: 1px;
  top: 1px;
  transition: 0.1s ease all;


input:focus ~ .placeholder
  top: 1px;
  font-size: 11px;

联系表格 7 中的 html：

<label> First Name:
[text first-name placeholder "First Name"] </label>


<label> Last Name:
    [text* last-name placeholder "Last Name"] </label>


<label> Your Email:
    [email* your-email placeholder "[e-mail]"] </label>

目前，我的字段占位符在聚焦时没有移动，但删除“~.placeholder”确实会使字段在聚焦时缩小。

我试图让我的字段执行的示例：

【问题讨论】：

o 不使用跨度通过 for 属性放置与您的输入相关联的标签：developer.mozilla.org/en-US/docs/Web/HTML/Element/label，其余的是 os 样式。 jsfiddle.net/oxug56c4

【参考方案1】：

input:focus ~ .lastname_floating-label,
input:focus ~ .firstname_floating-label,
input:not(:focus):valid ~ .firstname_floating-label,
input:not(:focus):valid ~ .lastname_floating-label
  top: 2px;
  left: 2px;
  bottom: 2px;
  font-size: 11px;
  opacity: 1;


.inputText 
  font-size: 14px;
  width: 200px;
  height: 35px;


.firstname_floating-label, .lastname_floating-label 
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 10px;
  transition: 0.2s ease all;

divposition:relative;

<div>
  <input type="text" class="inputText" required/>
  <span class="firstname_floating-label">Firstname</span>
</div>
<div>
  <input type="text" class="inputText" required/>
  <span class="lastname_floating-label">Lastname</span>
</div>

好的，我根据您的要求进行了更改。 其他例子是错误的。尝试添加更多输入，您可以检查占位符是否位于第一个输入中。而且，如果您将注意力集中在占位符上，则会覆盖键入的值。

如果只使用 HTML 和 CSS 是否可以，请检查此示例。

【讨论】：

抱歉，这很令人困惑，但这是我应该在原始帖子中发布的示例：i.imgur.com/udyWK0e.png 正如您所见，占位符位于图像字段的上角复选标记。这就是我需要在字段集中后移动占位符的地方，我发布的代码应该这样做，但由于某种原因，我无法让它与我的输入字段（名字、姓氏、电子邮件等）一起使用。 .).

您的问题似乎是您不知道如何将占位符移动到输入顶部。好的，所以您的意思是根据您的数据和 png 构建完整的表单。对吗？

我能够使用另一种方法来完成工作。这就是我要找的东西：i.imgur.com/mDod1Pw.gifv 很抱歉造成混淆，事实证明我真正要找的是所谓的“浮动标签”。我不知道这个词，所以我发现我的解释能力有限，很难找到答案哈哈。

好的，根据您的要求更改。

【参考方案2】：

首先要编辑占位符，您需要使用的选择器是:placeholder。您尝试重新创建的效果实际上只是浮动表单标签而不是占位符文本的技巧。这里有详尽的解释：https://css-tricks.com/float-labels-css/

【参考方案3】：

如果您仔细观察，jsfiddle 示例实际上并没有使用占位符，而是使用带有 .placeholder 类的 span 标签

您自己的代码具有输入占位符属性，您可以将其定位并输入 :focus 像这样：

input::-webkit-input-placeholder 
    color: #999;
    font-size: 15px;


input:focus::-webkit-input-placeholder 
    color: red;
    font-size: 5px;

/* Firefox < 19 */
input:-moz-placeholder 
    color: #999;

input:focus:-moz-placeholder 
    color: red;
    font-size: 5px;

/* Firefox > 19 */
input::-moz-placeholder 
    color: #999;

input:focus::-moz-placeholder 
    color: red;
    font-size: 5px;


/* Internet Explorer 10 */
input:-ms-input-placeholder 
    color: #999;

input:focus:-ms-input-placeholder 
    color: red;
    font-size: 5px;

这将使占位符文本在输入焦点上变小。

【参考方案4】：

阅读your comment后更新Daebak Do的答案。

我在输入中添加了一些填充，并在输入中移动了“占位符”内容（将 top 值从 -12px 更改为 2px 并添加了 left: 2px）。我还添加了margin-top 属性以使过渡平滑且不会干扰页面上的其余内容。

现在占位符内容位于输入框中，就像您共享的屏幕截图一样。

.wrapper
  position: relative;


input 
  font-size: 14px;
  height: 40px;
  transition: padding-top 0.1s, margin-top 0.1s;
  margin-top: 15px;


.placeholder 
  position: absolute;
  font-size:25px;
  pointer-events: none;
  left: 3px;
  top: 18px;
  transition: 0.1s ease all;


input:focus ~ .placeholder
  top: 2px;
  left: 2px;
  font-size: 11px;


input:focus
  margin-top: 1px;
  padding-top: 15px;
  transition: padding-top 0.1s, margin-top 0.1s;

<div class="wrapper">
  <input type="text">
  <span class="placeholder">Placeholder</span>
</div>

<p>Some content.</p>

【讨论】：

哇，这里的知识量惊人！非常感谢！现在我有多种方式，风格略有不同。我最终重新格式化了我的 HTML 并让它工作。我的成功：i.imgur.com/mDod1Pw.gifv 再次感谢您...真是太棒了！

@JackJones 添加到这里，你也可以在你的输入上使用required，然后使用:valid，这样当输入中有文本并且你点击时标签保持在顶部外部。见：jsfiddle.net/xfypqsb4

@elveti 非常感谢！稍微摆弄了一下，就明白了你的意思。这是一个非常有用的功能！