将输入字段放在标签中，更改焦点上的 bgcolor答案

【问题标题】：Placing an input-field in a label, changing bgcolor on focus将输入字段放在标签中，更改焦点上的 bgcolor
【发布时间】：2013-06-07 08:59:50
【问题描述】：

所以我想要做的是在标签上放置一个输入字段并更改输入字段的背景颜色。使 bgColor 覆盖标签的文本。

这是它的样子：

<div class="d-faq-field">
  <label class="i-faq-lastname-label" for="i-faq-lastname">Nachname</label>
  <input id="i-faq-lastname" type="text" name="lastname">
</div>

我将输入字段和标签都放在了一个 div 中，这样所有内容都具有响应性，并且 div 可以彼此浮动。

另外，看看jsFiddle。顶部有一个 div，它已经可以工作，但我似乎无法正确重建它。

【问题讨论】：

标签： html css

【解决方案1】：

如果我很好理解，请尝试简单

input:focus {
   position: relative;
   z-index: 1;    
}

因此，当输入聚焦时，它将覆盖标签。无论如何，当输入失去焦点时，您会再次看到标签。

您可能只需使用placeholder 属性即可获得正确的行为

【讨论】：

天哪，这太荒谬了。我一直试图解决这个问题 3 个小时。这正是我想要的，谢谢！
占位符不会通过 WCAG 2.0，因为它的对比度不够高，而且占位符的文本颜色在每个浏览器中都不能更改。
@NoReply 查看stackoverflow.com/questions/2610497/… 上投票最多的答案，似乎可以在几乎所有当前浏览器上更改颜色。
我知道，不幸的是该项目必须支持 IE7+。
好吧，在 IE10 之前不支持占位符，所以无论您决定为该属性使用什么 polyfill，您都可以设置正确的颜色

【解决方案2】：

不知道有没有看懂，为什么不用placeholder属性呢？

<textarea id="i-question2" required="required" type="search" name="question" placeholder="Gib hier deine Frage ein"></textarea>

【讨论】：

查看我对 Fabrizio Calderan 的回答的评论。