形式：输入+标签作为占位符答案

【问题标题】：Forms: input + label as a placeholder形式：输入+标签作为占位符
【发布时间】：2016-05-18 04:22:05
【问题描述】：

我正在为表单开发自适应占位符。受此http://blog.circleci.com/adaptive-placeholders 的启发，我使用<label> 并为其赋予样式以使其看起来像一个普通的占位符。

像这样：

input[type="text"][required] + label[placeholder]:before {
                content: attr(placeholder);
                display: inline-block;
                margin: 0 10px;
                padding: 0;
                color: #999999;
                white-space: nowrap;
}

通常我将占位符作为样式的目标（例如，给它一个验证错误类），如下所示：

.error::-webkit-input-placeholder {
                color: #000;
            }

我的第一个想法是设置 .error 类，但它不起作用：

.error::-webkit-input[type="text"][required] + label[placeholder]:before {
                color: #000;
            }

关于我如何正确地为上面使用的方法应用 CSS 类有什么建议吗？

JSFiddle：https://jsfiddle.net/34ye51t5/

谢谢。

【问题讨论】：

“关于我如何正确地为上面使用的方法应用 CSS 类的任何建议？”做什么？
占位符文本颜色为#999999。当我在一个空表单（没有填写输入字段）上点击“提交”时，所有未验证字段的背景颜色都设置为暗红色。 #999999 的浅灰色在红色背景下几乎看不到。我想让标签/占位符在同一操作中更改颜色。
你能发一个 jsfiddle 或 codepen 吗？
当然，添加了小提琴:)

标签： css forms input label placeholder

【解决方案1】：

您似乎遇到了特异性问题。添加以下 CSS 有效，但我会考虑重构您的代码以帮助避免这些问题。

input[type="text"].error + label[data-placeholder]:before{
  color: white;
}

首先placeholder 是not a valid attrinbute for a label - 它仅用于输入。您可以将其更改为数据属性，但我并没有真正看到这一点，您不妨按如下方式使用标签（alt 也不是有效属性

<label for="last_name">Last name</label>

然后您需要调整此标签的位置等。

我还会考虑将一个类添加到标签/输入组合的包装器中，以便更好地控制并避免上述特异性问题。我使用 sass 作为预处理器使用BEM 命名约定做了一个快速示例。这并不是要复制代码的行为，而是应该作为一个很好的起点。

http://codepen.io/jaycrisp/pen/pgQbWd

然后您可以将错误类作为“修饰符”添加到每个元素，以允许您独立设置它们的样式，例如.fancy__input--error 而不是依赖于使用 + 选择器之类的东西。

【讨论】：

太棒了！那成功了。感谢您对此问题的见解。